分享一个手机触屏滑动的插件:swipe.js。请在手机移动设备查看演示效果。
HTML
<div id="slider" class="swipe">
<ul class="box01_list">
<li class="li_list">
<div class="pic_list"><img src="images/css3.gif"><span><a href="http://www.sucaihuo.com/js/516.html">jQuery.lottery.js微信手机抽奖 </a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">纯CSS3实现超酷的鼠标悬停效果</a></p>
<p><span class="s_arrow"></span><a href="#">CSS3实现响应式数据表格</a></p>
<p><span class="s_arrow"></span><a href="#">纯CSS3制作漂亮的价格表</a></p>
<p><span class="s_arrow"></span><a href="#">使用CSS3美化复选框checkbox</a></p>
</div>
</li>
<li class="li_list">
<div class="pic_list"><img src="images/grid.gif"><span><a href="http://www.sucaihuo.com/js/515.html">jQuery自定义手机触屏函数</a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">jQuery复制表单元素</a></p>
<p><span class="s_arrow"></span><a href="#">基于jQuery的进度条展示效果</a></p>
<p><span class="s_arrow"></span><a href="#">JS实现网页加载进度条</a></p>
<p><span class="s_arrow"></span><a href="#">JS实现自动倒计时30秒后按钮才可用</a></p>
</div>
</li>
</ul>
</div>
js
由于是移动端应用,我们加载zepto.js,zepto就是体积小的jquery。接着加载触屏滑动插件touchslider.js。
<script type="text/javascript" src="js/zepto_min.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
var page = 'pagenavi';
var mslide = 'slider';
var mtitle = 'emtitle';
arrdiv = 'arrdiv';
var as = document.getElementById(page).getElementsByTagName('a');
var tt = new TouchSlider({id: mslide, 'auto': '-1', fx: 'ease-out', direction: 'left', speed: 600, timeout: 5000, 'before': function(index) {
var as = document.getElementById(this.page).getElementsByTagName('a');
as[this.p].className = '';
as[index].className = 'active';
this.p = index;
var txt = as[index].innerText;
$("#" + this.page).parent().find('.emtitle').text(txt);
var txturl = as[index].getAttribute('href');
var turl = txturl.split('#');
$("#" + this.page).parent().find('.go_btn').attr('href', turl[1]);
}});
tt.page = page;
tt.p = 0;
for (var i = 0; i < as.length; i++) {
(function() {
var j = i;
as[j].tt = tt;
as[j].onclick = function() {
this.tt.slide(j);
return false;
}
})();
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791