Javascript: 关于移动端与pc的点击事件的探讨

最近客户要求用Javascript实现视频轮播:

由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html{
    font-size:20px;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;;
        }
        #box{
            width: 16rem;height:7.5rem;overflow: hidden;line-height: 7.5rem;font-size: 50px;text-align: center;color:#fff;
        }
        ul{
            width: 64rem;height:7.5rem;overflow:hidden;
        }
        ul li{
            width: 16rem;height:7.5rem;float:left;
        }
    </style>
    <script>
        (function(win,doc){
            function change(){
                doc.documentElement.style.fontSize=doc.documentElement.client        Width*20/320+'px';
            }
            change();
            win.onresize=change;
        })(window,document);
    </script>
    <script>
        function drag(oDiv,aLi){
            var x=0;
            var iNow=0;
            oDiv.addEventListener('touchstart', function(ev){
                var id= ev.targetTouches[0].identifier;
                var disX= ev.targetTouches[0].pageX - x
                var downX=ev.targetTouches[0].pageX;
                function fnMove(ev){
                    if(ev.targetTouches[0].identifier==id){
                        x=ev.targetTouches[0].pageX - disX;
                        oDiv.style.transform='translateX('+x+'px)';
                    }
                }
                function fnEnd(ev){
                    if(ev.changedTouches[0].identifier==id){
                        document.removeEventListener('touchmove',fnMove, false);
                        document.removeEventListener('touchend', fnEnd, false);
                        oDiv.style.transition='1s all linear';
                        var upX=ev.changedTouches[0].pageX;
                        if(Math.abs(upX-downX)>50){
                            if(upX-downX<0){
                                iNow++;
                                if(iNow==4){
                                    iNow=3;
                                }
                            }else{
                                iNow--;
                                if(iNow==-1){
                                    iNow=0;
                                }
                            }
                        }
                        oDiv.style.transform='translateX('+-iNow*aLi.offsetWidth+'px)';
                        oDiv.addEventListener('transitionend',function(){
                            oDiv.style.transition='none';
                            x=-iNow*aLi.offsetWidth;
                        },false);

                    }
                }
                document.addEventListener('touchmove',fnMove, false);
                document.addEventListener('touchend', fnEnd, false);
                ev.preventDefault();        //事件绑定用的阻止默认事件;
            }, false)
        };
        document.addEventListener('DOMContentLoaded',function(){
            var oUl=document.querySelector('#box ul');
            var aLi=oUl.children;
            drag(oUl,aLi[0]);
        },false);
    </script>
    </head>
    <body>
        <div id="box">
            <ul >
                <li style="background:red;">1</li>
                <li style="background:yellow;">2</li>
                <li style="background:blue;">3</li>
                <li style="background:green;">4</li>
            </ul>
        </div>
    </body>
    </html>

轮播图

有兴趣的同学可以参开一下

请大家关注我的新公众号ar_indus,随后我会在公众号里推送新的博客地址。

PC端

下面写了一个程序实现视频轮播,pc端与移动端均可以实现,

后续计划的《react进阶系列》文章也会在新公众号中推送。

移动端

  1. 原生js的写法

    图片顺序 8123456781

    1. 设置计时器
    2. 当过度完成之后判断index是否到达两边界限,是的话设置位移
    3. 手指touchstart时,获取位置,暂停计时器
    4. 手指touchmove时,计算滑动距离,图片跟着位移
    5. 手指touchend时,判断距离是否超过1/3
      1. 超过图片滑动,判断是左滑还是右滑
      2. 不超过的话,滑回原来位置
    6. 重新开始计时器
  2. swiper插件

  3. zepto写法

但移动端,存在有一点bug;

公众号二维码

复制代码 代码如下:

图片 1

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“;
<html>
<head>
<meta http-equiv=”Content-Type” content=”textml; charset=UTF-8″>
<title>Insert title here</title>
</head>

ar_indus

<p>视频轮播11</p>
<div id=”container”></div>

<p>视频轮播22</p>
</body>
<ml>

<script type=”text/javascript”>
var index=0;
var arr = new Array(“71da9e4b6985a7b5951dd62ce7bb020d_7”,
“71da9e4b691a41961dcd6524593d39ee_7”,
“71da9e4b69efa71be86d625508ec9feb_7”);

var container = document.getElementById(“container”);
function printPlayer(index){
//alert(arr.length);
if(index>arr.length-1){
index=0;
}
//container.removeElement;
container.innerHTML=””;
var vid=arr[index];
if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
var video = document.createElement(“video”);
video.src = “;
video.onended=s2j_onPlayOver;
//video.addEventListener(‘ended’,j2s_onPlayOver, false);
video.autoplay=”true”;
video.controls=”controls”
container.appendChild(video);
}else{

var
swf=”;

container.innerHTML = “<OBJECT width=’600′ height=’375′ ><PARAM
NAME=movie VALUE='”+vid+”‘><param name=’allowscriptaccess’
value=’always’>”
+”<param name=’allowFullScreen’ value=’true’ />”
+”<EMBED src='”+swf+”‘ width=’600′ height=’375′
TYPE=’application/x-shockwave-flash’ allowscriptaccess=’always’
allowFullScreen=’true’ /></EMBED>”
+”</OBJECT>”;
<!– container.innerHTML =
“<OBJECT>”+swf+”</OBJECT>”;–>

}
}

printPlayer(index);

/* function j2s_onplayover(){
index++;
printPlayer(index);

} */

function s2j_onPlayOver() {
alert(‘ssss’);
index++;
printPlayer(index);
}
</script>

运行效果:
图片 2 

:
有兴趣的同学可以参开一下
下面写了一个程序实现视频轮播,pc端与移动端均可以实现,
但移动端,…

发表评论

电子邮件地址不会被公开。 必填项已用*标注