你的位置:首页 > 软件开发 > Java > jQuery jquery.windy 快速浏览内容

jQuery jquery.windy 快速浏览内容

发布时间:2016-09-01 09:00:03
在线实例效果一效果二效果三使用方法<div > <section > <div > <u ...

在线实例

效果一效果二效果三

使用方法

<div >    <section >        <div >            <ul id="wi-el" >                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/1.jpg" /><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/2.jpg" /><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/3.jpg" /><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/4.jpg" /><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/5.jpg" /><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>                <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/images/demo1/6.jpg" /><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>            </ul>            <nav>                <span id="nav-prev">上一张</span>                <span id="nav-next">下一张</span>            </nav>        </div>        <p ><strong>提示:</strong> 点击左右按钮看看</p>    </section></div><script type="text/javascript" src='/images/loading.gif' data-original="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e37417206/js/jquery.windy.js"></script><script type="text/javascript">    $(function() {        var $el = $('#wi-el'),                windy = $el.windy(),                allownavnext = false,                allownavprev = false;        $('#nav-prev').on('mousedown', function(event) {            allownavprev = true;            navprev();        }).on('mouseup mouseleave', function(event) {            allownavprev = false;        });        $('#nav-next').on('mousedown', function(event) {            allownavnext = true;            navnext();        }).on('mouseup mouseleave', function(event) {            allownavnext = false;        });        function navnext() {            if (allownavnext) {                windy.next();                setTimeout(function() {                    navnext();                }, 150);            }        }        function navprev() {            if (allownavprev) {                windy.prev();                setTimeout(function() {                    navprev();                }, 150);            }        }    });</script>

原标题:jQuery jquery.windy 快速浏览内容

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录