javascript 3d 逐偵產(chǎn)品展示(核心精簡(jiǎn))
更新時(shí)間：2014年03月26日 11:36:06 作者：
這篇文章主要介紹了javascript實(shí)現(xiàn)的3d逐偵產(chǎn)品展示,需要的朋友可以參考下
3d 逐偵圖片 素材
javascript 部分代碼
<span style="white-space:pre"> </span>var step = 0;
var first = 0;
var lth = document.querySelectorAll('#tobj img').length;
window.addEventListener('touchstart',function(e){
e.preventDefault();
first = e.touches[0].pageX;
})
window.addEventListener('touchmove',function(e){
e.preventDefault();
var x = e.pageX || e.touches[0].pageX;
document.getElementById('outs').innerHTML = step;
if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}
})
window.addEventListener('touchend',function(e){
e.preventDefault();
step = step;
})
核心精簡(jiǎn)
if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}
javascript 部分代碼
復(fù)制代碼 代碼如下:
<span style="white-space:pre"> </span>var step = 0;
var first = 0;
var lth = document.querySelectorAll('#tobj img').length;
window.addEventListener('touchstart',function(e){
e.preventDefault();
first = e.touches[0].pageX;
})
window.addEventListener('touchmove',function(e){
e.preventDefault();
var x = e.pageX || e.touches[0].pageX;
document.getElementById('outs').innerHTML = step;
if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}
})
window.addEventListener('touchend',function(e){
e.preventDefault();
step = step;
})
核心精簡(jiǎn)
復(fù)制代碼 代碼如下:
if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}
相關(guān)文章
這篇文章主要介紹了幾種在前端頁(yè)面獲取用戶(hù)IP地址的方法,包括使用第三方服務(wù)、WebRTC API和服務(wù)器端獲取,每種方法都有其優(yōu)缺點(diǎn),需要根據(jù)具體需求和場(chǎng)景選擇合適的方法,需要的朋友可以參考下2025-02-02
JS實(shí)現(xiàn)頁(yè)面內(nèi)跳轉(zhuǎn)的簡(jiǎn)單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面內(nèi)跳轉(zhuǎn)的簡(jiǎn)單代碼,需要的朋友可以參考下2017-09-09
js驗(yàn)證框架之RealyEasy驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了js驗(yàn)證框架之RealyEasy驗(yàn)證，記錄了RealyEasy驗(yàn)證的使用步驟，感興趣的小伙伴們可以參考一下2016-06-06
基于Javascript實(shí)現(xiàn)返回頂部按鈕
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)返回頂部按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
window.open不被攔截的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇window.open不被攔截的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦) 。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JS獲取當(dāng)前日期和時(shí)間的簡(jiǎn)單實(shí)例
這篇文章主要介紹了JS獲取當(dāng)前日期和時(shí)間的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-11-11
javascript ASCII和Hex互轉(zhuǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇javascript ASCII和Hex互轉(zhuǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面 的相關(guān)資料,需要的朋友可以參考下2016-09-09
Swiper是移動(dòng)端的一款非常強(qiáng)大的觸摸滑動(dòng)插件。下面通過(guò)本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
js實(shí)現(xiàn)div的切換特效上一個(gè)下一個(gè)
實(shí)現(xiàn)div切換的方法有很多，下面為大家介紹下使用js是如何實(shí)現(xiàn)的2014-02-02