用js原生加jquery實現下拉跳轉至商品詳情頁，上拉回到商品簡介

時間 2019-12-10

標籤原生 jquery 實現下拉轉至商品詳情拉回簡介欄目 JavaScript 简体版

原文原文鏈接

在作一個商城的項目時，作到商品詳情頁的時候須要實現這種下拉跳轉到商品詳情頁加載許多圖片，上拉回到商品簡介的效果，而且須要用戶在滑動時有一種費力的感受。最初是經過iscroll插件實現的，但這個插件在使用時有太多坑兒，老是下面會出現大片空白，還找不到是哪裏的問題。html

這裏用了js原生事件，核心是移動端的touchstart,touchmove,touchend三個事件，判斷相對位移來綁定相應的事件。下面是相應的代碼，效果還不是很完善。jquery

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height: 100%;
background: pink;
font-size:
overflow-y:scroll;
-webkit-overflow-scroll:touch;
overflow-scroll:touch;
}
header{
width:100%;
height: 100%;
background: yellow;
position: relative;
}
section{
width:100%;
height: 200%;
background: green;
display: none;
position: relative;
}
div{
background: #fff;
height: 50px;
text-align: center;
line-height: 50px;
width:100%;
}
div.header{
position: absolute;
bottom: -50px;
left: 0;
}
div.section{
top: -50px;
left: 0;
}
</style>
</head>
<body>
<header class="top">
<div class="header">向下拖動查看詳情</div>
<ul>
<li>商品簡介</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
</ul>
</header>
<section class="down">
<div class="section">向上拖動查看簡介</div>
<ul>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
<li>聖誕節聖誕節</li>
</ul>
</section>
<script src="jQuery-1.11.3.js"></script>
<script>

var oBody = document.getElementsByTagName("body")[0];
var oHeader = document.getElementsByTagName("header")[0];
var oSection = document.getElementsByTagName("section")[0];
var oDiv1 = document.getElementsByTagName("div")[0];
var oDiv2 = document.getElementsByTagName("div")[1];
var startX = 0;
var startY = 0;
var diffX = 0;
var diffY = 0;
var flag = true;
oBody.addEventListener("touchstart",function(e){
/*console.log(e);
var touches = e.touches;
console.log("按下的時候");
console.log("按下時的座標 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
var touches = e.touches;
startX = touches[0].pageX;
startY = touches[0].pageY;
},false);
oBody.addEventListener("touchmove",function(e){
/*var touches = e.touches;
console.log("移動的時候");
console.log("移動時的座標 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
var touches = e.touches;
diffY = startY - touches[0].pageY;
diffX = startX - touches[0].pageX;
/*if(flag && document.body.scrollHeight - document.body.clientHeight <= document.body.scrollTop + 14 && diffY > 200){
oDiv1.style.display = "block";
}else if(!flag && document.body.scrollTop < 10 && diffY < -200){
oDiv2.style.display = "block";
}*/
},false);
oBody.addEventListener("touchend",function(e){/*
var touches = e.touches;
console.log("離開的時候");
console.log("離開時的座標 X:"+touches[0].pageX + "Y:" + touches[0].pageY)*/
/*console.log("Y:"+diffY + ";X:" + diffX);
console.log(document.body.scrollHeight - document.body.clientHeight);
console.log("離開時的座標 X:"+document.body.scrollTop)*/
if(flag && document.body.scrollHeight - document.body.clientHeight <= document.body.scrollTop + 14 && diffY > 100){
//oHeader.style.display = "none";
$(".top").slideUp(200);
oSection.style.display = "block";
document.body.scrollTop = 50;
flag = false;
}else if(!flag && document.body.scrollTop < 10 && diffY < -100){
$(".top").slideDown(200,function(){
oSection.style.display = "none";
});

flag = true;
}
},false);
</script>
</body>
</html>web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。