javascript 3d 逐偵產(chǎn)品展示(核心精簡)
更新時間：2014年03月26日 11:36:06 作者：
這篇文章主要介紹了javascript實現(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;
})
核心精簡
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;
})
核心精簡
復(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)文章
這篇文章主要介紹了幾種在前端頁面獲取用戶IP地址的方法,包括使用第三方服務(wù)、WebRTC API和服務(wù)器端獲取,每種方法都有其優(yōu)缺點,需要根據(jù)具體需求和場景選擇合適的方法,需要的朋友可以參考下2025-02-02
JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼
這篇文章主要介紹了JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了js驗證框架之RealyEasy驗證，記錄了RealyEasy驗證的使用步驟，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細介紹了基于Javascript實現(xiàn)返回頂部按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
window.open不被攔截的簡單實現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄獁indow.open不被攔截的簡單實現(xiàn)代碼(推薦) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS獲取當(dāng)前日期和時間的簡單實例，有需要的朋友可以參考一下2013-11-11
javascript ASCII和Hex互轉(zhuǎn)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript ASCII和Hex互轉(zhuǎn)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面
這篇文章主要介紹了基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面 的相關(guān)資料,需要的朋友可以參考下2016-09-09
Swiper是移動端的一款非常強大的觸摸滑動插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
實現(xiàn)div切換的方法有很多，下面為大家介紹下使用js是如何實現(xiàn)的2014-02-02