zoukankan      html  css  js  c++  java
  • 最新拖动原理

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>无标题文档</title>
    </head>
    
    <body>
    <style type="text/css">
    .oDiv{
        width:300px;
        height:200px;
        overflow:hidden;
        position:relative;
    }
    .oDiv ul{
      margin:0;
      padding:0;
      width:1200px;
      position:absolute;
      
    }
    .oDiv ul li{ 
        list-style:none;
        float:left;
        border-radius:4px;
        border:1px solid red;
        width:100px;
        height:50px;
    }
    </style>
    
    <div class="oDiv">
        <ul id="oDiv">
            <li>你111</li>
            <li>你2222</li>
            <li>你333</li>
            <li>你444</li>
            <li>你555</li>
            <li>你666</li>
            <li>你777</li>
            <li>你888</li>
        </ul>
    </div>
    
    </body>
    
    </html>
    
    <script type="text/javascript" src="jquery.1.9.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
         var x = 100;  
         var offsetX = 0;
         var dom= $("#oDiv");      
            dom.on("touchstart",function(event){
                var event = window.event;
                offsetX = event.touches[0].pageX-x;
                //console.log(event.touches[0].pageX+"-"+_this.x+"="+_this.offsetX);
            });
            dom.on("touchmove",function(event){
                var event = window.event;
                var tmpx=event.touches[0].pageX-offsetX;
                if(tmpx>=0 && tmpx< screenWidth-_this.width){}
                if(tmpx>5){
                   tmpx=5;
                }else if(tmpx<-520){
                     tmpx=-520;
                }
                
                x = tmpx;
                dom.css({left:x});
                event.preventDefault();
                event.stopPropagation();
            });
    
    })
         
    
    
    </script>
  • 相关阅读:
    项目架构开发:数据访问层之Cache
    微信公众号平台接口开发:菜单管理
    【软件工程】第0次个人作业
    OO第四次博客作业
    OO第三次博客作业
    OO第二次博客作业
    Java学习笔记
    SQLInjection 靶场配置
    OO第一次博客作业
    面向对象先修:Java入门
  • 原文地址:https://www.cnblogs.com/yjhua/p/5663880.html
Copyright © 2011-2022 走看看