js获取客户滑动文章轨迹及还原

1、后台将文章分段可加特殊标签(id)方便整理,加name方便获取点击事件

2、阅读时,写点击事件

$("[name=diandian]").click(function(){
    var pName = this.id;
    var top = this.getBoundingClientRect().top;
    var bottom = this.getBoundingClientRect().bottom;
    var left = this.getBoundingClientRect().left;
    var right = this.getBoundingClientRect().right;
    var x= this.getBoundingClientRect().left+document.documentElement.scrollLeft; 
    var y= this.getBoundingClientRect().top+document.documentElement.scrollTop; 
    var recordId = "${recordId}";
    console.log(pName + "  top--" + top + "  bottom--" + bottom + "  x--" + x + "  y--" + y + "  left--" + left + "  right--" + right);

将坐标传到后台进行保存
    $.ajax({
        type: 'POST',
        url: 'getViewTrack',
        dataType: 'json',
        data:{"pName":pName,"top":top,"bottom":bottom,"x":x,"y":y,"left":left,"right":right,"recordId":recordId},
        success: function(){
           console.log("  done  ");
        }
    });
});

页面关闭时更新,最后一次点击逗留时间

window.οnbefοreunlοad=function(){
   $.ajax({
        type:"POST",
        url:"updateTrackEndTime",
        data:{"recordId":'${recordId}'},
        success:function(){
            
        }
       });
}

3、读取保存好的文章轨迹,用定时器还原

//浮动按钮

<div style="height:100px;background:#FF3F05;position:fixed;bottom:0px; width:100%;">
    <button style="height: 100px; width:300px; font-size: 50px;" id="restart" οnclick="restartPlay()">重播</button>
    <button style="height: 100px; width:300px;  font-size: 50px;" id="pause" οnclick="pause()">暂停</button>
    <button style="height: 100px; width:300px; font-size: 50px; display: none" id="play"   οnclick="continuePlay()">播放</button>
</div>

<script type="text/javascript">
$("title").html("资讯详情");
var i=0;
var list = eval('${trackList}');
var track;
var pname;
var topt;
var leftt;
//是否暂停
var ispause="N";
function goPname(i){
    //轮播完了 暂停
    if( i==list.length ){
        ispause="Y";
        return ;
    }
    track = list[i];
    pname  = track.pName;
    topt = track.top;
    leftt =  track.left;
    window.scrollTo({
          top: topt,
          left: leftt,
          behavior: 'smooth'
        });
    
}

//定时器
var t = 0;
var set1 = setInterval(fn, t);
function fn() {
    if(ispause=="Y"||i==list.length){
        t = 10000*1000;
        if(i==list.length){
            console.log("轨迹播放结束 ");
        }
    }else{
        t = list[i].stopTime*1000;
    }
    if(i<list.length){
        console.log(i+"---"+t);
        goPname(i++);
     }
    clearInterval(set1);
    if (t > 0) {
        set1 = setInterval(fn, t);
    }
}

//播放

function continuePlay(){
    ispause="N";
    $("#pause").show();
    $("#play").hide();
    clearInterval(set1);
    set1 = setInterval(fn, 0);
}

//重播

function restartPlay(){
    i=0;
    ispause="N";
    $("#pause").show();
    $("#play").hide();
    clearInterval(set1);
    set1 = setInterval(fn, 0);
}

//暂停
function pause(){
    i--;
    ispause="Y";
    $("#play").show();
    $("#pause").hide();
}

//禁止页面滑动  苹果好使,没有苹果机不好测试了

$(function(){
     window.ontouchmove = function(e){
         e.preventDefault && e.preventDefault();
         e.returnValue = false;
         e.stopPropagation && e.stopPropagation();
         return false;
     }
     document.body.style.height = '100%';
     document.body.style.overflow = 'hidden';     
     document.body.addEventListener('touchmove', function(e) {
         e.stopPropagation();
         e.preventDefault();
    });
});
</script>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值