仿iPhone、iPad界面滑屏切换

2019-01-13 15:03:48 阅读：255 来源： 互联网

标签：var touchs donwX pageX log console ul1

<!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 {
        width: 670px;
        height: 250px;
        position: relative;
        margin: 50px;
        overflow: hidden;
        background: pink;
    }

    #ul1 {
        position: absolute;
        left: 0;       
    }

    #ul1 li {
        width: 670px;
        height: 250px;
        float: left;
        list-style: none;
    }
     #ul1 li img{
         width: 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];
    // console.log(touchs.pageX,donwX)
    // console.log(this.offsetLeft)
    // console.log(touchs.pageX)
    if (this.offsetLeft >= 0) {
        // console.log(1111111)
        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) {
        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)

    }
    // console.log(this.style.left);
}

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>

标签：var,touchs,donwX,pageX,log,console,ul1
来源： https://www.cnblogs.com/hyx626/p/10262547.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

仿iPhone、iPad界面滑屏切换