zoukankan      html  css  js  c++  java
  • 仿iPhone、iPad界面滑屏切换

    <!DOCTYPE html>
    <html lange='en'>
    
    <head>
        <meta charset='UTF-8'>
        <title></title>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <style>
            * {
            margin: 0;
            padding: 0;
        }
    
        #div1 {
             670px;
            height: 250px;
            position: relative;
            margin: 50px;
            overflow: hidden;
            background: pink;
        }
    
        #ul1 {
            position: absolute;
            left: 0;       
        }
    
        #ul1 li {
             670px;
            height: 250px;
            float: left;
            list-style: none;
        }
         #ul1 li img{
         	  670px;
         }
        </style>
    </head>
    
    <body>
        <div id="div1">
            <ul id="ul1">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
                <li><img src="img/5.jpg"></li>
            </ul>
        </div>
    </body>
    
    </html>
    <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var w = aLi[0].offsetWidth;
    
    oUl.style.width = aLi.length * w + 'px';
    var downLeft = 0;
    var donwX = 0;
    var iNow = 0;
    var downTime = 0;
    var bBtn;
    
    oUl.ontouchstart = function(ev) {
    	console.log(1)
        var touchs = ev.changedTouches[0];
        donwX = touchs.pageX;
        downLeft = this.offsetLeft;
        bBtn = true;
        downTime = Date.now();
    }
    
    // console.log(donwX)
    oUl.ontouchmove = function(ev) {
        var touchs = ev.changedTouches[0];
        if (this.offsetLeft >= 0) {
            if (bBtn) {
                donwX = touchs.pageX;
                bBtn = false;
            }
            this.style.left = (touchs.pageX - donwX) / 3 + 'px';
            console.log(1)
    
        } else if (this.offsetLeft <= oDiv.offsetWidth - oUl.offsetWidth) {
        	console.log(oDiv.offsetWidth - oUl.offsetWidth)
            if (bBtn) {
                donwX = touchs.pageX;
                bBtn = false;
            }
            this.style.left = (touchs.pageX - donwX) / 3 + (oDiv.offsetWidth - oUl.offsetWidth) + 'px';
            console.log(2)
    
        } else {
            // debugger;
            this.style.left = touchs.pageX - donwX + downLeft + 'px';
            // console.log(touchs.pageX - donwX + downLeft+'this is')
            console.log(3)
    
        }
    }
    
    oUl.ontouchend = function(ev) {
        var touchs = ev.changedTouches[0];
    
        if (touchs.pageX < donwX) { //左
    
            if (iNow < aLi.length - 1) {
                // alert(Date.now() - downTime<300)
                if (donwX - touchs.pageX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && donwX - touchs.pageX > 30)) {
    
                    iNow++;
                }
            }
    
            $('#ul1').animate({ 'left': -iNow * w });
        } else { //右
            // debugger;
            if (iNow > 0) {
                if (touchs.pageX - donwX > aLi[0].offsetWidth / 2 || (Date.now() - downTime < 300 && touchs.pageX - donwX > 30)) {
                    iNow--;
                }
            }
            $('#ul1').animate({ 'left': -iNow * w });
    
        }
    }
    </script>
    <!-- 
    1、用户划动超过图片的一半或者用户快速的滑过时才滚动一页
    2、如果是在第1页,或者最后一页时移动的速度放慢3倍。
    
     -->
    
    
    
  • 相关阅读:
    如何用视频云技术,搞一个爆红的 “反应视频” 项目?
    停车场事故频频,AI 达人将摄像头变身安全卫士
    WebRTC 传输安全机制第二话:深入显出 SRTP 协议
    阿里云视频云 Retina 多媒体 AI 体验馆开张啦!
    20 岁发表 SCI 的学霸,梦想用算法改变世界
    阿里绩效考核,简单到不可思议,员工死心塌地跟你干!(转)
    【官方】阿里巴巴合伙人制度全文(转)
    blob视频地址如何下载(转)
    软件开发项目规划时,SA、SD与SE的区别与重要性 【转】
    一分钟看懂公有云和私有云的区别
  • 原文地址:https://www.cnblogs.com/hyx626/p/10262547.html
Copyright © 2011-2022 走看看