记录日志
<!DOCTYPE html><html style="font-size: 18.75px;"> <head> <meta charset="utf-8" /> <meta name="keywords" content="首页" /> <meta name="description" content="首页" /> <meta name="author" content="" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta name="format-detection" content="telphone=no" /> <script type="text/javascript"> // var deviveWidth = document.documentElement.clientWidth; // document.documentElement.style.fontSize = deviveWidth / 7.5 + "px"; </script> <title>test</title> <style> .picture { overflow: hidden; width: 100%}.picture img { width: 100%; height: auto; vertical-align: top}.picture .auto-scroll-wrap img { width: auto; height: 8.1333rem}.warm-tips { margin: .4rem 0 .5333rem .4267rem; color: #b97408; font-size: .5867rem; line-height: normal}.warm-tips .icon-mark,.warm-tips .icon-mark2 { margin-right: .16rem}.warm-tips .icon-plus { margin: 0 .16rem}.warm-tips span { vertical-align: middle}.warm-tips-bean { position: relative; line-height: normal; padding: .2667rem; background: -webkit-linear-gradient(18deg,#fcf2d1,#fffae8 45%,#fff9e9); background: linear-gradient(72deg,#fcf2d1,#fffae8 45%,#fff9e9); border-radius: .88rem; margin: .4rem .2667rem; font-size: 0}.warm-tips-bean__left { display: inline-block; width: 50%; color: #7d3e00; font-size: .5333rem; text-align: right; vertical-align: middle}.warm-tips-bean__left span { margin-right: 1.6rem}.warm-tips-bean .icon-bean-l { position: absolute; left: -.2667rem; bottom: 0; right: 0; top: 0; margin: auto}.warm-tips-bean__right { display: inline-block; width: 50%; background: -webkit-linear-gradient(bottom,#f6b21f,#ffdb62 71%); background: linear-gradient(0deg,#f6b21f,#ffdb62 71%); border-radius: .6133rem; box-shadow: 0 0 .72rem 0 rgba(255,220,145,.95); color: #161f4e; font-size: .5333rem; vertical-align: middle}.warm-tips-bean__right span { margin-left: 1.3333rem; font-size: .5333rem; vertical-align: middle}.warm-tips-bean__right em { position: relative; top: -.0533rem; color: #ff012b; font-size: 1.04rem; font-weight: 700; vertical-align: middle}.warm-tips-bean__right em i { color: inherit; font-size: .5867rem}.warm-tips-coupon { width: 100%; height: 3.8933rem; background: url(//plus-static.jd.com/index-3010/20210115/img/coupon_banner_bg.png) 50% no-repeat; background-size: contain; margin: .4rem 0}.iscroll-wraper { width: 100%; overflow: hidden;}.wrapper-p { display: inline-block; white-space: nowrap; padding: .2667rem; transition: 0.8s all ease; transition-duration: .3s; }.product { display: inline-block; overflow: hidden; width: 7.0667rem; background-color: #fff; border-radius: .2667rem; box-shadow: 0 0 .2667rem 0 rgba(204,197,167,.4); margin-right: .5333rem; vertical-align: middle}.product-img { padding-top: .32rem}.product-img img { display: block; width: 3.9467rem; height: 3.9467rem; margin: 0 auto}.product-name { overflow: hidden; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; line-height: normal; padding: 0 .5333rem; margin: .32rem 0; color: #333; font-size: .64rem}.product-price { line-height: normal; padding-top: .48rem; padding-bottom: .8rem; border-top: .1067rem dotted #eee; margin: .4rem .5333rem 0}.product-price__plus .icon-yuan-plus { vertical-align: middle}.product-price__plus .icon-plus-flat { vertical-align: middle; margin-left: .1867rem}.product-price__jd { color: #a9a9a9; font-size: .5333rem; padding-top: .2133rem}.product-price__jd .icon-yuan-jd { margin-left: .32rem}.product-bean { overflow: hidden; word-break: break-all; white-space: nowrap; line-height: .8rem; padding: .3467rem; background-color: #fffbf1; border-radius: .6133rem; margin: .32rem .4267rem; color: #7d3e00; font-size: .5867rem}.product-bean .icon-bean { margin-left: .08rem; vertical-align: baseline}.product-coupon { overflow: hidden; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; line-height: .8rem; padding: .3467rem; background-color: #f5f5f5; border-radius: .6133rem; margin: .32rem .4267rem; color: #7d3e00; font-size: .64rem; text-align: center}.view-more { display: inline-block; padding-right: .5333rem}.view-more:before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAABTmlDQ1BpY20AACjPY2BgUkksKMhhYWBgyM0rKQpyd1KIiIxSYH/IwA6EvAxiDAqJycUFjgEBPkAlDDAaCTAyMHy7BiIZGC7rgsw6JTW1SbVewNdipvDVi69EmxjwA66U1OJkIP0HiFOTC4pKgEamANnK5SUFIHYHkC1SBHQUkD0HxE6HsDeA2EkQ9hGwmpAgZyD7BpCtkJyRCDSD8QeQrZOEJJ6OxIbaCwLcLpnFBTmJlQoBxgxUByWpFSUg2jm/oLIoMz2jRMERGEqpCp55yXo6CkYGhuYMDKAwh6j+HAgOS0axMwix5vsMDLb7////vxsh5rWfgWEjUCfXToSYhgUDgyA3A8OJnQWJRYlgIWYgZkpLY2D4tJyBgTeSgUH4AlBPdHGasREk9nicGBhY7/3//1mNgYF9MgPD3wn///9e9P//38VAzXcYGA7kAQAXAmXv957RtwAAACBjSFJNAABtmAAAc48AAQg1AAB+agAAZMkAAQmxAAAxcQAAE7wS/w/XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC2ElEQVRYw82YS08UQRSF2+GhgMTHFhbE4GvhiBocEDUxMagbCH8CVo6s1Cgkhn8xEqM8JIGFK6JRFBKEjRtfgy5A9xpfMe71HHOKFM10uqtrcJzky/T0VN17uurWrbodBDGfQqFgaAA5cAPMgGWwAj6KFd2bUZuc+vztn/pjCWgEfWACLIA7YBBcAlnQIrK6N6g2C+rTJxvugtRpG+gA98ETcAXsB7VRRi3xtWqbV1/a6JRNJxF1oB8sgpugyfWJLFFNmqpF2ayLtWNNxQh4Bs6DKp85ls0q2Xoq2zsjbarDDjV8BI54B9rm0aHNh+CWfEXGBIduXoFXFhElxGQ12v0bYsZqwOX2HHSXW0QJMRfkK7fuSxecs0kwDDJbISIkJiNfk+vxoj96tMyat1JESEyzfPYYIcx+41rziafEWg27wB5Q7dg3kM8xUG9igwHamkJEO7grYwdTPEirAvdkoGQzajKmg4g2jeR38BgcTiGEPm+Da/wxDS4nMWKJOKZ95Kuin/tJfQohgXxP82JJy8llJDgVn5T4mDG3pwlyaykv8+KtyaIxHRiMpyTip7b+qxLGJHU8xAmNXEvUNmFl2yIvVtU4TshuBSZF/AZfwEvwQt+vQrzRd0F9o+zS96qrECagXxLyjU8CXutQ9C7Ee33f0/KOsrsPrLlMTQ04p+CmmA+Mdp1ZeNY4C85Y8HcXOBCVY6y9p5goWK0Ir1be4XHwM3ggZzWewboUyKjr8jViuHznwEWzrfss37QJrV3T9APMpsysJqFd903xp3UeJYd8U3yDsmTiTS8UM1wRez02vXGz6ZHeCh4Dev/Lg9G/Pip2y1fHBl8VODzPbzo8V6icGClZTsQUWJkyFFiZUIHVmLTaY1k4oDJxuAwl55BsDSQqOUsUXNzMppTG83YRniBjmiJ8TjbcivAEryVG5cB+LcGt/Kju5dXG/7WEw4sankfWRNHnRc0fT5OaT/W/79QAAAAASUVORK5CYII=); background-repeat: no-repeat; background-position: 50%; background-size: contain; overflow: hidden; display: inline-block; content: ""; width: 18PX; height: 18PX; vertical-align: middle; -ms-transform: rotate(0); transform: rotate(0); -webkit-transform: rotate(0); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; -webkit-transition: transform .3s}.view-more:after { display: inline-block; content: "滑动查看更多"; width: .5867rem; line-height: .6933rem; color: #999; font-size: .5867rem; white-space: normal; vertical-align: middle; margin-left: .5333rem}.view-more.reverse:before { -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform: rotate(180deg)}.view-more.reverse:after { content: "释放查看更多"} </style> </head> <body> <div class="iscroll-wraper" id="slider" style="touch-action: pan-y"> <div class="wrapper-p" id="slider-list"> <div class="product" id="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/145137/15/16516/59269/5fc4ba82E0e5cf0ba/be85810e09855ced.jpg!q70.webp" /> </div> <div class="product-name"> 宁美-魂 i3 10100F/GTX1050Ti/芝奇8G/256G SSD/游戏台式电脑主机DIY组装机/三年上门 </div> <div class="product-bean"> 下单返13.44元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/163190/3/2852/97414/6006b126Edbacbaad/68f2d2e9e7f615fe.jpg!q70.webp" /> </div> <div class="product-name"> SK-II神仙水230ml+小灯泡30ml护肤美白精华液套装化妆品礼盒(礼盒内赠洗面奶+清莹露+眼霜)skiisk2新年礼物 </div> <div class="product-bean"> 下单返25.70元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/156190/24/6733/226114/60071df0E6f46266e/2e3e500da33e82ea.jpg!q70.webp" /> </div> <div class="product-name"> FILA斐乐童装儿童洋气羽绒服外套2021年春季新款女童粉色加厚保暖两件套潮 珍珠红-PC 120cm </div> <div class="product-bean"> 下单返13.29元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/154941/34/15514/193207/6007d3e4Ea568717e/93881f72646769ca.jpg!q70.webp" /> </div> <div class="product-name"> 探路者（TOREAD）冲锋衣 20秋冬 男女防风保暖防水防寒三合一可脱卸套羽绒保暖外套TAWI92772 浅蓝（女） 2XL </div> <div class="product-bean"> 下单返9.19元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/170456/9/3790/384534/6009f6b3E9fb6295d/7ede8c43a58512a3.jpg!q70.webp" /> </div> <div class="product-name"> 【商场同款】金三塔睡衣女真丝重磅19姆米100%桑蚕丝简约可外穿长袖套装家居服 香妃色 L(165/88A) </div> <div class="product-bean"> 下单返7.34元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/165865/19/3086/156108/600545ecE4a8ada55/92a48f12b61119e4.jpg!q70.webp" /> </div> <div class="product-name"> 海鸥(SeaGull)手表 重器系列男士手表 自动机械手表男士 机械表 大三针日历腕表 运动手表 男表 819.33.6081H </div> <div class="product-bean"> 下单返13.19元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/157040/20/4318/178633/60091652Edfd9192b/03e11147c956dda5.jpg!q70.webp" /> </div> <div class="product-name"> Apple 苹果 iPhone 11 手机 全网通 双卡双待 黑色 128G【新包装】+AirPodsPro套装 </div> <div class="product-bean"> 下单返32.69元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/86053/18/17384/110270/5e869ee8Ec16f918b/123d422c085d9efe.jpg!q70.webp" /> </div> <div class="product-name"> 华为P40 5G手机 冰霜银 全网通(8GB 128GB) </div> <div class="product-bean"> 下单返25.89元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/151879/24/15853/262943/6008dc95E7cd0051a/19d47954f23b789f.jpg!q70.webp" /> </div> <div class="product-name"> 探路者冲锋衣情侣2020秋冬新款可拆卸外套加绒加厚户外登山服装潮 男-深宝蓝 XXL </div> <div class="product-bean"> 下单返11.89元京豆<span class="icon-bean"></span> </div> </div> <div class="product"> <div class="product-img"> <img src="https://m.360buyimg.com/babel/jfs/t1/165638/40/3730/217030/600a7199E7a8e7128/0fcf976410a0c981.jpg!q70.webp" /> </div> <div class="product-name"> 三星（SAMSUNG） 全高清智慧显示器 集成型SOC智慧无线投屏 蓝牙连接 内置APP 带内置音箱 31.5英寸S32AM500NC </div> <div class="product-bean"> 下单返10.94元京豆<span class="icon-bean"></span> </div> </div> <div class="view-more"></div> </div> </div> <script type="text/javascript"> document .getElementById("slider") .addEventListener("touchstart", touchstart, false); document .getElementById("slider") .addEventListener("touchmove", touchmove, false); document .getElementById("slider") .addEventListener("touchend", touchend, false); var width = document.documentElement.clientWidth; var startX = 0; var index = 0; var translateX = 0; var startTime; var startTranslate; var newTranslateX; var isSlide = false; let isOk=false let endduration='' let startduration='' var sliderNumber = 4; //滑块是数量，控制溢出不能滑动 let maxWidth=document.getElementById('slider-list').offsetWidth-width+20 var arr = document.getElementsByClassName("view-more"); function touchstart(e) { startX = e.touches[0].clientX; startTime = new Date().getTime(); startTranslate = translateX; isSlide = true; } function touchmove(e) { if (!isSlide) return; var currentX = e.touches[0].clientX; //2端溢出不能滑动 if (startTranslate == 0 && currentX > startX) return; // if ( // Math.abs(startTranslate) == width * (sliderNumber - 1) && // currentX < startX // ) // return; // 向右滑动时， 没数据无法滑动 // if (currentX < startX) { // } distance = currentX - startX; translateX = currentX - startX + startTranslate; // console.log("translateX", translateX); // console.log("newTranslateX", newTranslateX); // console.log("maxWidth", maxWidth); // console.log("distance111111", Math.abs(translateX)-maxWidth); // console.log("currentX", currentX); startduration= +new Date() - startTime // console.log('touchmove时间',startduration) if(128 < Math.abs(translateX)-maxWidth&&startduration>200){ arr[0].classList.add("reverse"); isOk=true }else{ isOk=false arr[0].classList.remove("reverse"); } //transform: translate(-1113px, 0px) translateZ(0px); document.getElementById("slider-list").style.transform = "translate(" + translateX + "px,0px) translateZ(0px)"; } function touchend() { if (!isSlide) return; endduration= +new Date() - startTime if (translateX > startTranslate) { // 向左划 // 向左划 if (distance > width / 3 || (distance > 40 && endduration < 600)) { newTranslateX = startTranslate + width; } else { newTranslateX = startTranslate } console.log('向左划',newTranslateX) if(newTranslateX>0){ newTranslateX=0 } } else { // 向右划 if(startTranslate==0){ return } if ( Math.abs(distance) > width /4|| (Math.abs(distance) > 40 && endduration < 600) ) { newTranslateX = startTranslate - width; } else { newTranslateX = startTranslate; } if(Math.abs(newTranslateX)>maxWidth){ newTranslateX=-maxWidth } } translateX = newTranslateX; // console.log('touchend时间',endduration) // console.log('touchend时间相差时间',startduration-endduration) if(100 < Math.abs(translateX)-maxWidth){ // console.log('你好') arr[0].classList.add("reverse"); }else{ // console.log('很好') arr[0].classList.remove("reverse"); if(isOk){ setTimeout(()=>{ window.location.href="https://www.baidu.com/" },33) } } document.getElementById("slider-list").style.transform = "translate(" + translateX + "px,0px) translateZ(0px)"; } </script> </body></html>
