常用代碼集合
阿新 • • 發佈:2019-02-27
高度 document term dto set 怎麽 oss scroll highlight 一、jquery返回頂部
$("html , body").animate({scrollTop: 0},‘slow‘);
二、jQuery判斷移動端屏幕的滑動方向
$(‘body‘).on(‘touchstart‘, function(e) { var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; startY = touch.changedTouches[0].pageY; $(‘body‘).on(‘touchmove‘, function(e) { touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (touch.pageX - startX > 10) { console.log("右劃"); showPrevious(); $(‘body‘).off(‘touchmove‘); } else if (touch.pageX - startX < -10) { console.log("左劃"); showNext(); $(‘body‘).off(‘touchmove‘); }; if (touch.pageY - startY > 10) { console.log("下劃"); $(‘body‘).off(‘touchmove‘); } else if (touch.pageY - startY < -10) { console.log("上劃"); $(‘body‘).off(‘touchmove‘); }; }); // Return false to prevent image // highlighting on Android return false; }).on(‘touchend‘, function() { $(‘body‘).off(‘touchmove‘); });
三、頁面移動到對應位置開始執行動畫
橙色容器從下方進入可視區域時(或者進入一段高度後),容器內的動畫播放。
var eTop=$(element).offset().top;//橙色容器距離整個頁面頂部的距離 var wTop=$(window).height();//綠色框可視區域的高度 window.onresize=funciton(){ var wTop=$(window).height();//縮放窗口這個高度會改變,需要再取得 } $(window).scroll(funciont(){ var dTop = $(document).scrollTop();//綠色框可視區域上面到黑色頁面頂部的距離,會實時改變 //所以當橙色容器進入可視區域怎麽判斷? //放在scroll事件裏面 if(dTop+wTop > eTop){//動畫播放事件} });
就這樣,當可視區域上面的高度+可視區域高度>容器距離頂部高度,我們就知道容器進入【可視區底部】了
如果你想讓容器進入一段距離(比如100px)再觸發動畫?
//放在scroll事件裏面
if(dTop+wTop-100 > eTop){//動畫播放事件}
四、滾動條的啟用與禁止
//禁止滾動條
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
//啟用滾動條
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
常用代碼集合