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

可媲美flash的基于jquery的Sequence插件实例之苹果主题

jQuery插件 fishcity 696浏览

这是一款可媲美flash的基于jqeury库的sequence插件的苹果主题,大家都知道苹果的主题是非常简洁大气的,而这款这件不但把简洁大气继承了,同进还进行了多层次的动画效果,就像一个真实的播放器一样。整个插件需要html5CSS3技持,但可兼容主流浏览器。下面我们来快速使用它吧。

1、下载苹果主题(Apple Style theme),当然也要包括了sequence插件。

2、解压后把apple-style文件夹放到您的项目中,以便调用。

3、在您需要用使的页面调,本例子是index.html

4、在文档头部载入样式列表文件

<link rel="stylesheet" media="screen" href="css/sequencejs-theme.apple-style.css" />

5、引库jquery库、jquery.sequence-min.js和sequencejs-options.apple-style.js,这里的jquery要1.9.1以上版本

<script src="http://ajax. /ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.sequence-min.js"></script>
<script src="js/sequencejs-options.apple-style.js"></script>

6、创建html标签,这里的标签看起来有些多,不过结构还是挺清晰的,下面来看下

<div id="sequence-theme">
    <div id="sequence">
        <ul class="controls">
	    <li class="status"></li>
	    <li class="sequence-prev"></li>
	    <li class="sequence-pause"></li>
	    <li class="sequence-next"></li>
	</ul>

	<ul class="sequence-canvas">
	<li class="animate-in">
	    <div class="intro">
		<h2>Built using Sequence.js</h2>
		<h3>The Responsive Slider with Advanced CSS3 Transitions</h3>
	    </div>
	    <img class="iphone" src="images/iphone.png" alt="iPhone4" />
	    <img class="iphone-shadow" src="images/iphone-shadow.png" />
	</li>
	<li>
	    <img class="ipad" src="images/ipad.png" alt="iPad" />
	    <div class="slide2">
		<h2>Creative Control</h2>
		<p>Create unique sliders using CSS3 transitions</p>
	    </div>
	    <img class="ipad-shadow" src="images/ipad-shadow.png" />
	</li>
	<li>
	    <div class="slide3">
	        <h2>Cutting Edge</h2>
		<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
	    </div>
	    <img class="iphone2" src="images/iphone.png" alt="iPhone4" />
	    <img class="iphone2-shadow" src="images/iphone-shadow.png" />
	    <img class="iphone3" src="images/iphone.png" alt="iPhone4" />
	    <img class="iphone3-shadow" src="images/iphone-shadow.png" />
	    <img class="iphone4" src="images/iphone.png" alt="iPhone4" />
	    <img class="iphone4-shadow" src="images/iphone-shadow.png" />
	</li>
        </ul>

    </div>
</div>

<div id="sequence">是整个插件的展示区域,<ul class="controls">是按键控制框,<ul class="sequence-canvas">里的每个li为一个动画页面,而li中的元素可以随意写。

7、本特效的JS代码分成了两部分,一部分为选项参数的设置然后调用,一部分为控制按钮样式的设置,下面加了注释,应该可以看得明白。

$(document).ready(function(){
    $status = $(".status");
    var options = {
        autoPlay: true, //是否自动播动
        autoPlayDelay: 4000, //自动播放间隔4秒
        pauseOnHover: false, //鼠标悬浮时是否暂停
        hidePreloaderDelay: 500, //预加载延迟500毫秒
        nextButton: true, //下一个按钮
        prevButton: true, //上一个按钮
        pauseButton: true, //暂停按钮
        preloader: true, //是否预加载
        hidePreloaderUsingCSS: false,     //是否预加载样式              
        animateStartingFrameIn: true,    //是否进入帧时开始动画
        navigationSkipThreshold: 750, //链接阀值
        preventDelayWhenReversingAnimations: true,//防止动画延时出错
        customKeyEvents: { //客户端按钮事件
            80: "pause"  //key值等于80(即P键)时,暂停
        }
    };
	//开始调用插件
    var sequence = $("#sequence").sequence(options).data("sequence");

//顶部中意的控制按钮
	//进入动画帧后如果设置了自动播放并且没有暂停,激活进度条,同时使向前向后按键指针变成手势
    sequence.afterNextFrameAnimatesIn = function() {
        if(sequence.settings.autoPlay && !sequence.hardPaused && !sequence.isPaused) {
            $status.addClass("active").css("opacity", 1);
        }
        $(".sequence-prev, .sequence-next").css("cursor", "pointer").animate({"opacity": 1}, 500);
    };
	//当前帧退出动画效果时(完成动画时),移去进度条。同时使向前向后按键鼠标指针自动形态,降低亮度
    sequence.beforeCurrentFrameAnimatesOut = function() {
        if(sequence.settings.autoPlay && !sequence.hardPaused) {
            $status.css({"opacity": 0}, 500).removeClass("active");
        }
        $(".sequence-prev, .sequence-next").css("cursor", "auto").animate({"opacity": .7}, 500);
    };
	//暂停时多去进度条
    sequence.paused = function() {
        $status.css({"opacity": 0}).removeClass("active").addClass("paused");
    };
	//开始时激活进度条
    sequence.unpaused = function() {
        if(!sequence.hardPaused) {
            $status.removeClass("paused").addClass("active").css("opacity", 1)
        }               
    };
});

这样,完成以上工作,整个插件就可以使用了,测试下吧。

转载请注明:jQ酷 » 可媲美flash的基于jquery的Sequence插件实例之苹果主题

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