程序博客网 > 客户关怀软件

页面水平滑动Silder

来源：互联网 发布：客户关怀软件 编辑：程序博客网 时间：2024/05/16 05:55
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<metaname="apple-touch-fullscreen"content="YES"/>
<metaname="apple-mobile-web-app-status-bar-style"content="black"/>
    <styletype="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #cash_slider_canvas{
            width: 100%;
            height: 100%;
            /*height: 568px;*/
            overflow: hidden;
            /*background: black;*/
        }
        .cash_slider_li,.cash_slider_ul{
            list-style: none;
            height: 100%;
            overflow: hidden;
             
        }
        .cash_slider_li{
            /*width: 100%;
            height: 568px;*/
            position: absolute;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
             
        }
        .cash_slider_img{          
            /*height: 568px;*/
            /*height: 90%;*/
            max-height: 100%;
            max-width: 100%;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
    <divid="cash_slider_canvas">
    <!--     <ul>
            <li class="cash_slider_li" style="-webkit-transform:translate3d(0,0,0);">
                <img class="cash_slider_img" src="imgs/0.jpg">
            </li>
            <li class="cash_slider_li" style="-webkit-transform:translate3d(320px,0,0);">
                <img class="cash_slider_img" src="imgs/1.jpg">
            </li >
            <li class="cash_slider_li" style="-webkit-transform:translate3d(640px,0,0);">
                <img class="cash_slider_img" src="imgs/2.jpg">
            </li>
        </ul> -->
    </div>
<scripttype="text/javascript">
    //构建组件
    var Slider = function(obj){
        //构造函数需要的参数
        this.canvas = obj.dom;
        this.list = obj.list;
 
        //初始化
        this.init();
        //渲染DOM
        this.renderDOM();
        //绑定DOM事件
        this.bindDOM();
    }
    //初始化
    Slider.prototype.init = function(){
        //屏幕比例
        this.scale = window.innerHeight / window.innerWidth;
        //屏幕宽度
        this.scaleW = window.innerWidth;
        //初始化索引
        this.idx = 0;
    };
    //渲染DOM
    Slider.prototype.renderDOM = function(){
        var scale = this.scale;
        var scaleW = this.scaleW;
        var canvas = this.canvas;
        var lis = this.list;
        var len = lis.length;
 
        this.ul = document.createElement('ul');
        for(i = 0 ; i < len; i++){
            varli= document.createElement('li');
            li.className= "cash_slider_li";
            li.style.webkitTransform= "translate3d("+ i * scaleW +"px, 0, 0)";
            varitem= lis[i];
            //判断图片比例  确定图片显示方式
            if(item['height'] / item['width'] > scale){
                //长图
                li.innerHTML = '<imgclass="cash_slider_img" src="'+ item['img'] +'"  height="'+ item['height'] +'" />';
            }else{
                //宽图
                li.innerHTML = '<imgclass="cash_slider_img" src="'+ item['img'] +'"  width="'+ item['width'] +'" />';
            }
 
            this.ul.appendChild(li);
        }
        this.ul.style.cssText = 'width:' + scaleW + 'px';
        this.ul.className = "cash_slider_ul";
 
        canvas.style.height = window.innerHeight + 'px';
        canvas.appendChild(this.ul);
    };
 
    //绑定事件
    Slider.prototype.bindDOM = function(){
        var self = this;
        var ul = this.ul;
        var scaleW = this.scaleW;
        var len = self.list.length;
 
        var startHandler = function(event){
            event.preventDefault();
            //开始坐标
            self.startX = event.touches[0].pageX;
            //初始化偏移值
            self.offsetX = 0;
            //开始时间
            self.startTime = new Date() * 1;
        };
 
        var moveHandler = function(event){
            event.preventDefault();
 
            self.offsetX = event.touches[0].pageX - self.startX;
 
            var lis = ul.getElementsByTagName('li');
 
            console.log(self.offsetX);
 
            var i = self.idx - 1;
 
            var m = i + 3;
 
            for(i ; i < m; i++){
                // lis[i] && (lis[i].style.webkitTransition= '-webkitTransform 0s ease-out');
                lis[i] && (lis[i].style.webkitTransition= 'none');
                 
                lis[i] && (lis[i].style.webkitTransform= 'translate3d('+ ((i - self.idx) * self.scaleW + self.offsetX) +'px, 0, 0)');
 
            }
        };
 
        varendHandler= function(event){
            event.preventDefault();
            //滑动值
            varoffsetX= self.offsetX;
            //结束时间
            varendTime= newDate() * 1;
 
            varboundary= scaleW/ 6;
 
             // 根据触摸时长触发快慢操作
             if(endTime - self.startTime > 300){
                //慢操作
                if(offsetX >= boundary ){
                    //下一页
                    self.goIndex('-1');
                 }else if(offsetX < -boundary ){
                    //上一页
                    self.goIndex('+1');
                 }else{
                    //本页
                    self.goIndex('0');
                 } 
             }else{
                //快操作
                if(offsetX > 50){
                    //下一页
                    self.goIndex('-1')
                }else if(offsetX < -50){
                    //上一页
                    self.goIndex('+1');
                }else{
                    //本页
                    self.goIndex('0');
                }
             }
        };
 
        ul.addEventListener('touchstart', startHandler);
        ul.addEventListener('touchmove', moveHandler);
        ul.addEventListener('touchend', endHandler);
    };
    Slider.prototype.goIndex = function(n){
        var idx = this.idx;
        var lis = this.ul.getElementsByTagName('li');
        var len = lis.length;
        var cidx;
        //如果是传字符则为索引的变化
        if(typeof n =='number'){
            cidx = idx;
        }else if(typeof n =='string'){
            cidx = idx + n * 1;
        }
 
        //索引超出
        if(cidx > len - 1){
            cidx = len - 1;
        }else if(cidx < 0){
            cidx= 0;
        }
        //保留当前索引值
        this.idx= cidx;
 
        //改变过渡方式，从无动画变成有动画
        lis[cidx].style.webkitTransition= '-webkit-transform 0.2s ease-out';
        lis[cidx - 1] && (lis[cidx - 1].style.webkitTransition= '-webkit-transform 0.2s ease-out');
        lis[cidx + 1] && (lis[cidx + 1].style.webkitTransition= '-webkit-transform 0.2s ease-out');
 
        //改变动画后所应该的位移值
        lis[cidx].style.webkitTransform= 'translate3d(0, 0, 0)';
        lis[cidx - 1] && (lis[cidx - 1].style.webkitTransform= 'translate3d(-'+ this.scaleW +'px, 0, 0)');
        lis[cidx + 1] && (lis[cidx + 1].style.webkitTransform= 'translate3d(+'+ this.scaleW +'px, 0, 0)');
 
    }
    //图片数据
    var list = [{
        height: 800,
        width: 716,
        img: "imgs/0.jpg"
    },
    {
        height: 800,
        width: 713,
        img: "imgs/1.jpg"
    },
    {
        height: 535,
        width: 537,
        img: "imgs/2.jpg"
    },
    {
        height: 618,
        width: 622,
        img: "imgs/3.jpg"
    },
    {
        height: 800,
        width: 716,
        img: "imgs/4.jpg"
    },
    {
        height: 800,
        width: 716,
        img: "imgs/5.jpg"
    },
    {
        height: 800,
        img: "imgs/6.jpg",
        width: 713
    },
    {
        height: 800,
        img: "imgs/7.jpg",
        width: 716
    },
    {  
        height: 800,
        img: "imgs/8.jpg",
        width: 716
    }];
    window.onload= function(){
        new Slider({
            dom : document.getElementById('cash_slider_canvas'),
            list : list
        });
    }
</script>
</body>
 
</html>
0 0
客户关怀软件 客户关怀软件
原创粉丝点击
热门IT博客
淘宝客模式加活动淘宝客模式加活动
淘宝 内衣 模特淘宝 内衣 模特
java英文简历
windows写字板 英文
软件更新 不可用
top域名价格
找工作哪个软件好
gta5优化设置
2016年网络剧排行榜
淘宝违规方式
zbrush软件
office for mac价格
php手机商城板块
led center软件下载
新闻网站 知乎
最终幻想 知乎
nba2k手游邓肯巅峰数据
深圳乐其网络
广州seo待遇
淘宝店铺保证金计划
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 彩铅画的花 简单彩铅风景画 彩铅画水果 彩铅渐变 水性彩铅 油性彩铅 彩铅秀秀 彩铅画大师 彩铅画植物 彩铅画过程 创意彩铅画 景观彩铅手绘 彩铅手绘图 彩铅画树 彩铅装饰画 卡通彩铅画 用彩铅画的风景画 彩铅设计 彩铅画教程书 水溶性彩铅用法 彩铅画蝴蝶 园林彩铅手绘 彩铅速写 水溶彩铅用法 明星彩铅画 彩铅图画 彩铅手绘园林 彩铅动物画 可擦彩铅 彩铅技法 什么是水溶性彩铅 辉柏嘉水溶性彩铅 一步一步教你画彩铅素描雏菊 哪个牌子的水溶性彩铅好 彩铝门窗 彩铝落水系统 断桥彩铝门窗 彩涂铝卷厂家 彩铝雨水管 断桥彩铝门窗价格 彩铝门 彩涂铝卷价格

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里