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

jQuery相机快门效果幻灯片插件Shutter

媒体 fishcity 1691浏览

jquery快门效果Shutter

Shutter是一款模拟相机快门效果的jquery幻灯片插件,Shutter基于html5与Canvas实现,整个插件轻巧,使用方便,无太多参数设置。您可非常轻松的把插件整合到你的网站中,来展示你的摄影作品或作为幻灯片使用。

jquery实例:Shutter使用方法

引入核心文件

<link rel="stylesheet" type="text/css" href="assets/jquery.shutter/jquery.shutter.css" />
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.shutter/jquery.shutter.js"></script>

写入HTML

<div id="container">
    	<ul>
            <li><img src="assets/img/photos/1.jpg" width="640" height="400" alt="Landscape" /></li>
            <li><img src="assets/img/photos/2.jpg" width="640" height="400" alt="Yacht club" /></li>
            <li><img src="assets/img/photos/3.jpg" width="640" height="400" alt="Desert" /></li>
            <li><img src="assets/img/photos/4.jpg" width="640" height="400" alt="Machinery" /></li>
        </ul>
</div>

写入JS初始化

$(document).ready(function(){

	var container = $('#container'),
		li = container.find('li');

	// 使用 tzShutter 插件. 设置快门图片的路径,然后调用callback方法
	
	container.tzShutter({
		imgSrc: 'assets/jquery.shutter/shutter.png',
		closeCallback: function(){

			// 根据li的可见性来创建一个简单的幻灯片

			li.filter(':visible:first').hide();
			
			if(li.filter(':visible').length == 0){
				li.show();
			}
			
			// 预设一个0.1秒的快门触发器
			setTimeout(function(){container.trigger('shutterOpen')},100);
		},
		loadCompleteCallback:function(){
			setInterval(function(){
				container.trigger('shutterClose');
			},4000);
			
			container.trigger('shutterClose');
		}
	});
	
});

转载请注明:jQ酷 » jQuery相机快门效果幻灯片插件Shutter

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