jQuery瀑布流实例无限滚动加载图片 瀑布流式页面布局代码

   2023-03-08 学习力0
核心提示:jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 查看演示!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。

 

jQuery瀑布流实例无限滚动加载图片

查看演示>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery瀑布流实例最流行瀑布流图片展示</title>
<meta name="description" content="jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。" />

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
em{font-style:normal;}
a{text-decoration:none;cursor:pointer;color:#666666;}
a:hover{color:#FF6699;}
body{background:url("images/bodybg.jpg") repeat #f5f6f7;color:#666666;font-family:Arial;font-size:12px;}
.fl{float:left;}.fr{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
.demo{width:950px;margin:0 auto;}

/* item_list */
.item_list{position:relative;padding:0 0 50px;}
.item{
	width:226px;background:#fff;overflow:hidden;margin:15px 0 0 0;
	border-radius:4px 4px 4px 4px;
	box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);	
}
.item_t{padding:10px 8px 0;}
.item_t .img{background-color:#FFFFFF;margin:0 auto;position:relative;width:210px;min-height:210px;}
.item_t .img a{display:block;}
.item_t .img a:hover{background:#000;}
.item_t .img a:hover img{filter:alpha(opacity=80);-khtml-opacity:0.8;opacity:0.8;-webkit-transition:all 0.3s ease-out;-khtml-transition:all 0.3s ease-out;}
.item_t .price{
	position:absolute;bottom:10px;right:0px;background-color:rgba(0, 0, 0, 0.2);color:#FFF;
	filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#33000000, endcolorstr=#33000000);
}
.item .btns{display:none;}
.img_album_btn{top:0px;right:0px;position:absolute;background:#ff6fa6;color:#ffffff;height:20px;line-height:20px;width:56px;border-radius:3px;}
.img_album_btn:hover{color:#fff;}
.item_t .title{padding:8px 0;line-height:18px;}
.item_b{padding:10px 8px;}
.item_b .items_likes .like_btn{background:url("images/fav_icon_word_new_1220.png") no-repeat;display:block;float:left;height:23px;width:59px;margin-right:5px;}
.item_b .items_likes em{line-height:23px;display:block;float:left;padding:0px 6px;color:#FF6699;font-weight:800;border:1px solid #ff6fa6;border-radius:3px;}

/* more */
#more{display:block;margin:10px auto 20px;}

/* infscr-loading */
#infscr-loading{bottom:-10px;left:45%;position:absolute;text-align:center;height:20px;line-height:20px;z-index:100;width:120px;}

/* page */
.page{display:none;font-size:18px;height:60px;text-align:center;margin:20px 0 0 0;}
.page_num a,.page_num span{margin:0 2px;background:url("images/page.png") no-repeat;display:inline-block;width:30px;height:28px;line-height:26px;overflow:hidden;}
.page_num a{background-position:-65px 0;color:#FF3333;overflow:hidden;}
.page_num .prev{background-position:1px -33px;}
.page_num .unprev{background-position:1px 0;cursor:default;}
.page_num .next{background-position:-32px 0;}
.page_num .unnext{background-position:-32px -33px;cursor:default;}
.page_num .current{background-position:-99px 0;color:#FFFFFF;}
.page_num .etc{background-position:-172px 8px;}

/* to_top */
.to_top a,.to_top a:hover{background:url("images/gotop.png") no-repeat}
.to_top a{
	background-position:0 0;float:left;height:50px;overflow:hidden;width:50px;position:fixed;bottom:35px;cursor:pointer;right:20px;
	_position:absolute;
	_right:auto;
	_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||20));
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||20)-(parseInt(this.currentStyle.marginBottom, 10)||20)));
}
.to_top a:hover{background-position:-51px 0px;}
</style>

<script type="text/javascript">
var isWidescreen=screen.width>=1280; 
if(isWidescreen){document.write("<style type='text/css'>.demo{width:1194px;}</style>");}
</script>

<script type="text/javascript">
function item_masonry(){ 
	$('.item img').load(function(){ 
		$('.infinite_scroll').masonry({ 
			itemSelector: '.masonry_brick',
			columnWidth:226,
			gutterWidth:15								
		});		
	});
		
	$('.infinite_scroll').masonry({ 
		itemSelector: '.masonry_brick',
		columnWidth:226,
		gutterWidth:15								
	});	
}

$(function(){

	function item_callback(){ 
		
		$('.item').mouseover(function(){
			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
			$('.btns',this).show();
		}).mouseout(function(){
			$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
			$('.btns',this).hide();		 	
		});
		
		item_masonry();	

	}

	item_callback();  

	$('.item').fadeIn();

	var sp = 1
	
	$(".infinite_scroll").infinitescroll({
		navSelector  	: "#more",
		nextSelector 	: "#more a",
		itemSelector 	: ".item",
		
		loading:{
			img: "images/masonry_loading_1.gif",
			msgText: ' ',
			finishedMsg: '木有了',
			finished: function(){
				sp++;
				if(sp>=10){ //到第10页结束事件
					$("#more").remove();
					$("#infscr-loading").hide();
					$("#page").show();
					$(window).unbind('.infscr');
				}
			}	
		},errorCallback:function(){ 
			$("#page").show();
		}
		
	},function(newElements){
		var $newElems = $(newElements);
		$('.infinite_scroll').masonry('appended', $newElems, false);
		$newElems.fadeIn();
		item_callback();
		return;
	});

});
</script>
</head>

<body>

<div class="demo clearfix">
	
			
	<div class="item_list infinite_scroll">
	
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/js/images/more/2012-05-15/608.html"><img width="210" height="285" alt="js lazyload实现网页图片延迟加载特效" src="images/pic/01.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/js/images/more/2012-05-15/608.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>js lazyload实现网页图片延迟加载特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html"><img width="210" height="164" alt="js图片特效制作js焦点图上下滚动slider切换效果" src="images/pic/02.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>js图片特效制作js焦点图上下滚动slider切换效果</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/js/menu/sx/2012-03-25/502.html"><img width="210" height="287" alt="js树形导航菜单制作垂直js导航条特效" src="images/pic/03.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/js/menu/sx/2012-03-25/502.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>js树形导航菜单制作垂直js导航条特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-09-06/753.html"><img width="210" height="285" alt="flash图片导航条自动切换轮播焦点图" src="images/pic/04.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-09-06/753.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片导航条自动切换轮播焦点图</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-06-04/640.html"><img width="210" height="323" alt="flash图片特效左右按钮控制图片折叠切换效果" src="images/pic/05.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-06-04/640.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片特效左右按钮控制图片折叠切换效果</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-05-08/596.html"><img width="210" height="315" alt="flash焦点图片带内容与按钮的3D动画图片特效" src="images/pic/06.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-05-08/596.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图片带内容与按钮的3D动画图片特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-03-11/388.html"><img width="210" height="282" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/pic/07.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-03-11/388.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash特效制作flash图片滚动带按钮控制左右图片滚动</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-03-03/378.html"><img width="210" height="266" alt="flash焦点图切换特效制作各大网站的焦点图片轮播" src="images/pic/08.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-03-03/378.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图切换特效制作各大网站的焦点图片轮播</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-03-03/374.html"><img width="210" height="254" alt="flash焦点图切换动画图片和标题文字配合显示含flash源码下载" src="images/pic/09.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-03-03/374.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash焦点图切换动画图片和标题文字配合显示含flash源码下载</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/images/2012-03-03/370.html"><img width="210" height="276" alt="flash图片切换左右滚动带序列索引按钮控制flash动画图片特效" src="images/pic/10.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/images/2012-03-03/370.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/flash/letter/2012-03-04/386.html"><img width="210" height="131" alt="flash文字特效制作数字类似文字打印效果,属于flash动画文字特效一种" src="images/pic/11.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/flash/letter/2012-03-04/386.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>flash文字特效制作数字类似文字打印效果,属于flash动画文字特效一种</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/css3/layout/2011-10-13/215.html"><img width="210" height="131" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" src="images/pic/12.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/css3/layout/2011-10-13/215.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/css3/layout/2011-02-21/36.html"><img width="210" height="287" alt="CSS如何定位工程" src="images/pic/13.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/css3/layout/2011-02-21/36.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>CSS如何定位工程</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/css3/menu/2011-09-21/197.html"><img width="210" height="323" alt="用div+css3美化制作动画导航特效鼠标滑过动画显示" src="images/pic/14.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/css3/menu/2011-09-21/197.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>用div+css3美化制作动画导航特效鼠标滑过动画显示</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/css3/menu/2011-02-20/22.html"><img width="210" height="304" alt="用div+css制作一个CSS3的简约图标导航菜单" src="images/pic/15.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/css3/menu/2011-02-20/22.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>用div+css制作一个CSS3的简约图标导航菜单</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/html5/tx/2011-08-13/120.html"><img width="210" height="315" alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="images/pic/16.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/html5/tx/2011-08-13/120.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
		
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="http://www.jsfoot.com/html5/tx/2011-02-21/42.html"><img width="210" height="314" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/pic/17.jpg" /></a>
					<span class="price">¥195.00</span>
					<div class="btns">
						<a href="http://www.jsfoot.com/html5/tx/2011-02-21/42.html" class="img_album_btn">加入专辑</a>
					</div>
				</div>
				<div class="title"><span>jquery 幻灯片切换应用一个HTML5的幻灯片</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="http://www.jsfoot.com" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="http://www.jsfoot.com">评论</a><em class="bold">(0)</em></div>
			</div>
		</div><!--item end-->
	
	</div>
					
					
	<div ></a></div>
					
	<div >
		<div class="page_num">
			<span class="unprev"></span>
			<span class="current">1</span>
			<a href="http://www.jsfoot.com"> 2 </a>
			<a href="http://www.jsfoot.com"> 3 </a>
			<a href="http://www.jsfoot.com"> 4 </a>
			<a href="http://www.jsfoot.com"> 5 </a>
			<span class="etc"></span>
			<a href="http://www.jsfoot.com">12</a>
			<a href="http://www.jsfoot.com" class="next"></a>
		</div>
	</div>

</div>
					
<div style="display:none;" ></a></div>
					

<script type="text/javascript">
$(function(){

	$(window).scroll(function(){
		$(window).scrollTop()>1000 ? $("#gotopbtn").css('display','').click(function(){
			$(window).scrollTop(0);
		}):$("#gotopbtn").css('display','none');	
	});
	
});
</script>

</body>
</html>

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言  通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现,其实对事件的绑定还可以使用on和bind,为了搞明白两者之间的区别特做记录,以备以后查阅。正文  bind和on都是给元素绑定事件用的,但两者在使用时有些差别,我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery仿各大商城网站圆形转盘抽奖活动,淘宝商城圆形转盘抽奖活动、天猫商城圆形转盘抽奖活动、京东商城圆形转盘抽奖活动等。 查看演示
    03-08
  • jquery仿京东商城商品分类导航菜单 jquery仿京东左侧菜单导航
    jquery仿京东商城商品分类导航菜单 jquery仿京
    jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果。 查看演示
    03-08
  • jQuery SuperSlide插件制作72个种常用的网页特效
    jQuery SuperSlide插件制作72个种常用的网页特
    SuperSlide2.1 超级滑动门72个扩展效果 我¥19买的,分享给大家希望大家学会感恩 “什么?20个基础效果+72个扩展效果,做到狗一 样,才19?!太不值了,大爷我给你99!” -- “多谢大爷!” 19元并不贵,就当是对广大互联网默默耕耘者的一点支持与鼓励
    03-08
  • jquery多功能弹出层插件支持Ajax、确认对话框、二次弹出层等
    jquery多功能弹出层插件支持Ajax、确认对话框、
    jquery jBox弹出层插件制作确认对话框弹出层_ajax弹出层_底部浮动弹出层等 查看演示
    03-08
  • 17种常用的jQuery全屏焦点图代码 jq 获取焦点
    jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻
    03-08
  • 6种非常酷炫的jquery banner焦点图片幻灯片切换
    6种非常酷炫的jquery banner焦点图片幻灯片切换
    jquery sequence slide滑动幻灯片插件6款时尚的图片滑动幻灯片切换 查看演示
    03-08
  • jquery倒计时插件可自定义多个倒计时间
    jquery倒计时插件可自定义多个倒计时间
    jquery倒计时插件设置多个自定义倒计时时间,任意设置天、小时、分钟、秒倒计时间功能。查看演示!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1
    03-08
点击排行