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>