jquery图片延迟加载波浪条纹排列特效代码下载


jquery图片延迟加载波浪条纹排列特效代码下载
jquery图片延迟加载波浪条纹排列特效代码下载以及图片延迟加载、波浪条纹排列等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<script type="text/javascript">
$(document).ready(function(){
	$(window).bind("scroll", function(){
		$(".fold").each(function(){
			var fold = $(window).height() + $(window).scrollTop();
			if(fold >= $('#loadingbox').offset().top){
				var t=this;
				$.get("bipi.html",function(html){
					$(html).insertBefore("#loadingbox")
				});
			}
		});
	});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:"helvetica neue",arial,sans-serif;font-size:12px;color:#444;}
.demo{width:840px;margin:0 auto;}
/* showbox */
.fold{height:36px;line-height:36px;margin:20px 0 0 0;}
.fold h2{text-align:center;font-size:16px;color:#3366cc;}
.showbox{float:left;margin:10px 9px;display:inline;}
.showpic{margin:20px 0;border:solid 1px #ddd;width:190px;font-size:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);}
.showpic .picbox{padding:15px 15px 0;text-align:center;}
.showpic p{line-height:22px;margin:10px 0 0 0;padding:5px 10px;border-top:solid 1px #F5F2F2;background:#FAFAFA;}
#loadingbox{clear:both;text-align:center;}
</style>
<div class="demo">
	<div class="fold">
		<h2>jquery延迟加载仿花瓣网首页波浪条纹加载</h2>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery聚光灯插件制作jquery图片特效鼠标滑过图片当前图片高亮" src="images/small1ef40ddb8e4798d1737bbc414cfb17ec.jpg" /></a>
			</div>
			<p>jquery聚光灯插件制作jquery图片特效当鼠标滑过图片时当前图片高亮显示其余另外的图片变暗。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery图片切换与jquery lazyload图片延迟加载插件结合特效" src="images/small578c5d822200e38fa692f59d6a7f92d2.jpg" /></a>
			</div>
			<p>jquery图片切换当鼠标滑过图片变换成另一张图片,与jquery lazyload图片延迟加载插件结合随着浏览器滚动条滚动图片延迟加载两款特效结合很给力。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery图片放大特效鼠标滑过图片浮动层变大显示" src="images/smallc40edfd12471e5104437d58c348cc5ac.jpg" /></a>
			</div>
			<p>jquery hover图片放大镜特效制作单排图片当鼠标滑过图片时,大图片浮动在小图上方变大显示。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/smallc7fb1818b3a9ae6770422992d6df7b45.jpg" /></a>
			</div>
			<p>jquery图片滚动控制单排图片左右滚动,设置序号导航条按钮控制单排图片滚动,带左右按钮控制单排图片滚动。</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="js图片切换插件带滤镜百叶窗图片js幻灯片切换特效" src="images/smalle407457cb1d209e3d66d6404322ea6b2.jpg" /></a>
			</div>
			<p>js图片切换插件制作一个百叶窗图片幻灯片切换特效,带滤镜图片切换效果,带索引按钮控制焦点图轮播切换特效。内含js代码下载。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="js图片特效制作百叶窗滤镜轮播效果js焦点图片切换" src="images/small8151e95aace719721dfb9372b1801f60.jpg" /></a>
			</div>
			<p>js图片特效制作一个js图片切换带百叶窗滤镜轮播效果适合应用于网站js焦点图片切换。内含js代码下载。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="js图片特效制作js焦点图上下滚动slider切换效果" src="images/small20dd0b83c2db55f830e4453a601a3cd4.jpg" /></a>
			</div>
			<p>js图片切换特效制作js焦点图slider上下滚动切换带序列按钮控制图片滚动。内含js代码下载。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" src="images/small359cba92eacf5bdd69ffd2f52ca60b00.jpg" /></a>
			</div>
			<p>javascript特效制作一个banner图片焦点左右滚动切换,带按钮控制和,固定图标控制图片左右滚动,是一款提高用户体验的网页特效。</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/smallc2c8c7a13e553fa79bedb70c34873a6d.jpg" /></a>
			</div>
			<p>flash特效制作一个左右带按钮控制图片左右滚动的flash图片滚动特效,支持flash源码下载。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="flash焦点图切换特效制作各大网站的焦点图片轮播" src="images/small4f0b6ee167a02ef1adfa9d91959ed490.jpg" /></a>
			</div>
			<p>用flash特效制作一个焦点图片切换多种滤镜效果,支持图片轮播和图片外调等,适用于网站焦点图片切换轮播。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="flash焦点图片切换3D flash动画图片效果带左右按钮控制" src="images/small2e34b329d1cad84074015dad4bf6f018.jpg" /></a>
			</div>
			<p>flash焦点图特效大图和小图按顺序切换效果,鼠标滑过小图对应大图3D flash图片切换效果,带左右按钮控制flash图片切换滚动。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="flash焦点图切换动画图片和标题文字配合显示含flash源码下载" src="images/smallebd5b0ea178c42f9ac662086b9429f7c.jpg" /></a>
			</div>
			<p>flash焦点图切换效果带动画图片和标题文字显示切换过程,图片淡隐淡现flash特效简约性flash图片轮播含flash源码下载。</p>
		</div>
	</div>
	<div class="showbox">
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery框架与coffeescript制作iphone苹果IOS手机主屏幕触摸效果" src="images/smalle330b45a6743674c27b9c223dbac711a.jpg" /></a>
			</div>
			<p>jquery框架与coffeescript结合制作iphone苹果手机的IOS手机界面主触屏手指划过屏幕整个界面图片左右滑动的触摸效果。jquery下载。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" src="images/small8937f779ac932d157fe04fe463b083d4.jpg" /></a>
			</div>
			<p>用Canvas和HTML5制作类似百叶窗照相机拍摄快门拍摄效果、是一种非常逼真酷炫的jquery HTML5 图片幻灯片特效,基于jquery 幻灯片插件,适用在个人网站展示,提高网站的酷炫吸引度。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="images/small323ce4b13f72648e096bd1a86cba762a.jpg" /></a>
			</div>
			<p>今天做一个非常有趣的,并建立“纺纱报纸”带有古典场景,CSS3、HTML5、jQuery、canvas元素制作报纸缩小到放大翻转图片展示效果的过程,非常逼真。</p>
		</div>
		<div class="showpic">
			<div class="picbox">
				<a href="http://www.51qianduan.com/" target="_blank"><img width="150" height="150" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/small5be1afce8d42e773d6eceba386d7189e.jpg" /></a>
			</div>
			<p>这一次,我们正在与新的canvas元素和jQuery,这是完全在旧浏览器的功能逐步增强,以及HTML5的幻灯片。</p>
		</div>
	</div>
	<div id="loadingbox"><img width="16" height="16" src="images/loading.gif" /> 信息正在加载中。。。</div>
</div>

相关推荐

发表评论

相关文章