注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

方便实用的Jquery Cycle特效实例

jQuery插件 fishcity 965浏览

非常好用的jquery图片特效插件,只需换着参数就可以实现不同的效果,方便实用,棒极了。好了,我们开始吧。

第一步:老样的先写入Html结构,图片数量不限,这里写的是3个。

div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

第二步:再写入CSS代码,非常简单,只需定义装图片的DIV大小与图片的表现样式,这里就不多说明了,相信大家一看就懂。

.pics {  
    height:  232px;  
    width:   232px; 
    padding: 0;  
    margin:  0;   
}  
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 ;
}

第三步:引入核心JS,包括Jquery,cycle,easing,其中easing不是必须的,只是部分特效需要用到它。

<script type="text/javascript" src="http://ajax. /ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

第四步:写入JS。

$('.pics').cycle({     
		fx: 'fade' // 这里可以选择不同的效果,具体的效果列表,请往下看。    
	});    
});

这样,插件的使用就完成了,预览下吧!

这是不同效果的参数,换上使可实现N多不同的效果,具体是什么的样效果,还是自己动手体验吧。

blindX

blindY

blindZ

cover

curtainX 

curtainY

fade

fadeZoom

growX

growY 

scrollUp 

scrollDown 

scrollLeft

scrollRight 

scrollHorz

scrollVert 

shuffle

slideX

slideY

toss

turnUp

turnDown

turnLeft

turnRight

uncover

wipe

zoom

转载请注明:jQ酷 » 方便实用的Jquery Cycle特效实例

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。