最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

touchslider手机TAB触屏切换页面插件

来源:http://www.erdangjiade.com/ 二当家的 2015-09-29 03:55浏览(1492)

分享一个手机触屏滑动的插件:swipe.js。请在手机移动设备查看演示效果。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

touchslider手机TAB触屏切换页面插件
分类:手机特效 > 导航菜单 难易:中级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

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.erdangjiade.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.erdangjiade.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;
        }
    })();
}
标签: 滑动触屏swiper
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/517.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    07-02 17:48
    kksoft
    这个移动端滑动效果很流畅没有卡顿,很不错
1 2