JS實作的3D拖曳翻頁效果程式碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS實作的3D拖曳翻頁效果程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

3d js

本文實例講述了JS實現的3D拖曳翻頁效果。分享給大家參考，具體如下：

以前看到一個很火的帖子，拖曳實現的翻頁效果，非常的有創意，自己也很喜歡，於是乎就萌發了用自己的方法模仿的想法。感謝原創作者的創意，結果一樣，但過程不一樣哦。奉上代碼，供大家參考。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px; overflow:hidden;}
img{border:0;}
li{list-style:none;}
#drag{
 width:682px;
 color:#fff;
 position:relative;
 margin:50px auto 0 auto;
 font-family:"Microsoft YaHei", "宋体";
}
#drag ul{
}
#drag ul li{
 text-align:right;
 height:30px;
 line-height:30px;
 overflow:hidden;
 vertical-align:middle;
 font-size:14px;
 border-bottom:1px dashed #fff;
}
#drag ul li span{
 float:right;
}
#drag ul li a{
 float:left;
 color:#fff;
 text-decoration:none;
}
#drag div{
 width:600px;
 height:350px;
 padding:40px;
 background:#77521d;
 cursor:e-resize;
 border:1px solid #999;
 position:absolute;
 left:0;
 top:0;
}
#drag div p{
 width:100%;
 padding-bottom:20px;
 text-align:center;
 position:absolute;
 bottom:0;
 left:0;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oDrag=document.getElementById('drag');
 var aDiv=oDrag.getElementsByTagName('div');
 var aLink=oDrag.getElementsByTagName('a');
 var i=0;
 for(i=0;i<aDiv.length;i++)
 {
  aDiv[i].style.zIndex=(i+1);
  aDiv[i].innerHTML+='<p>第 '+(i+1)+'/'+aDiv.length+' 页 提示：左右拖拽翻页</p>';
  aDiv[i].onmousedown=drag;
 }
 for(i=0;i<aLink.length;i++)
 {
  aLink[i].onmousedown=function(ev)
  {
   var oEvent=ev||event;
   oEvent.stopPropagation&#63;oEvent.stopPropagation():oEvent.cancelBubble=true;
  };
 }
};
function drag(ev)
{
 var obj=this;
 var mouseStart=[];
 var objStart=[];
 var oEvent=ev||event;
 mouseStart.x=oEvent.clientX;
 objStart.x=this.offsetLeft;
 document.onmousemove=function(ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+objStart.x;
  var t=oEvent.clientY-mouseStart.y+objStart.y;
  obj.style.left=l+'px';
  return false;
 };
 document.onmouseup=function()
 {
  document.onmousemove=document.onmouseup=null;
  startMove(obj);
 };
 return false;
}
function startMove(obj)
{
 var oDrag=document.getElementById('drag');
 var aDiv=oDrag.getElementsByTagName('div');
 var iSpeed=0;
 obj.timer=setInterval(function(){
  obj.onmousedown=null;
  obj.offsetLeft>=0&#63;iSpeed+=10:iSpeed-=10;
  var l=obj.offsetLeft+iSpeed;
  if(l>obj.offsetWidth)
  {
   l=obj.offsetWidth;
   moveDirection(iSpeed);
  }
  else if(l<-obj.offsetWidth)
  {
   l=-obj.offsetWidth;
   moveDirection(iSpeed);
  }
  obj.style.left=l+'px';
 },30);
 function moveDirection(iSpeed)
 {
  for(i=0;i<aDiv.length;i++)
  {
   aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1;
   if(aDiv[i]==obj)
   {
    obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length;
   }
  }
  clearInterval(obj.timer);
  t=setInterval(function(){
   obj.onmousedown=null;
   var l=obj.offsetLeft-iSpeed;
   if((iSpeed<0 && l>0) || (iSpeed>0 && l<0))
   {
    l=0;
    clearInterval(t);
    obj.onmousedown=drag;
   }
   obj.style.left=l+'px';
  },30);
 }
}
</script>
</head>
<body>
<div id="drag">
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">啊！爱人</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">宁静温泉</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">你的样子</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1980</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1990</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲2000</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">亚细亚的孤儿</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">伴侣</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">童年</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱的箴言</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱人同志</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">思念</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">母亲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">是否</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">牧童</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">青春舞曲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">蒲公英</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">未来的主人翁</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">如今才是唯一</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">暗恋</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">弹唱词</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">飞车</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">滚滚红尘</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">光阴的故事</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">之乎者也</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">现象七十二变</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">乡愁四韵</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">穿过你的黑发我的手</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">大兵歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">黄色面孔</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">台北红玫瑰</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">我所不能了解的事</a></li>
  </ul>
 </div>
</div>
</body>
</html>

登入後複製

希望本文所述對大家JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7543

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

為何在自動駕駛方面Gaussian Splatting如此受歡迎，開始放棄NeRF？ Jan 17, 2024 pm 02:57 PM

寫在前面&筆者的個人理解三維Gaussiansplatting（3DGS）是近年來在顯式輻射場和電腦圖形學領域出現的一種變革性技術。這種創新方法的特點是使用了數百萬個3D高斯，這與神經輻射場（NeRF）方法有很大的不同，後者主要使用隱式的基於座標的模型將空間座標映射到像素值。 3DGS憑藉其明確的場景表示和可微分的渲染演算法，不僅保證了即時渲染能力，而且引入了前所未有的控制和場景編輯水平。這將3DGS定位為下一代3D重建和表示的潛在遊戲規則改變者。為此我們首次系統性地概述了3DGS領域的最新發展與關

選擇相機還是光達？實現穩健的三維目標檢測的最新綜述 Jan 26, 2024 am 11:18 AM

0.寫在前面&&個人理解自動駕駛系統依賴先進的感知、決策和控制技術，透過使用各種感測器（如相機、光達、雷達等）來感知周圍環境，並利用演算法和模型進行即時分析和決策。這使得車輛能夠識別道路標誌、檢測和追蹤其他車輛、預測行人行為等，從而安全地操作和適應複雜的交通環境。這項技術目前引起了廣泛的關注，並認為是未來交通領域的重要發展領域之一。但是，讓自動駕駛變得困難的是弄清楚如何讓汽車了解周圍發生的事情。這需要自動駕駛系統中的三維物體偵測演算法可以準確地感知和描述周圍環境中的物體，包括它們的位置、

CLIP-BEVFormer：明確監督BEVFormer結構，提升長尾偵測性能 Mar 26, 2024 pm 12:41 PM

寫在前面&筆者的個人理解目前，在整個自動駕駛系統當中，感知模組扮演了其中至關重要的角色，行駛在道路上的自動駕駛車輛只有通過感知模組獲得到準確的感知結果後，才能讓自動駕駛系統中的下游規控模組做出及時、正確的判斷和行為決策。目前，具備自動駕駛功能的汽車中通常會配備包括環視相機感測器、光達感測器以及毫米波雷達感測器在內的多種數據資訊感測器來收集不同模態的信息，用於實現準確的感知任務。基於純視覺的BEV感知演算法因其較低的硬體成本和易於部署的特點，以及其輸出結果能便捷地應用於各種下游任務，因此受到工業

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

$牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24)$ 牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24) Apr 23, 2024 pm 01:20 PM

寫在前面項目連結：https://nianticlabs.github.io/mickey/給定兩張圖片，可以透過建立圖片之間的對應關係來估計它們之間的相機姿態。通常，這些對應關係是二維到二維的，而我們估計的姿態在尺度上是不確定的。一些應用，例如隨時隨地實現即時增強現實，需要尺度度量的姿態估計，因此它們依賴外部的深度估計器來恢復尺度。本文提出了MicKey，這是一個關鍵點匹配流程，能夠夠預測三維相機空間中的度量對應關係。透過學習跨影像的三維座標匹配，我們能夠在沒有深度測試的情況下推斷度量相對

LLM全搞定！ OmniDrive：集3D感知、推理規劃於一體（英偉達最新） May 09, 2024 pm 04:55 PM

寫在前面&筆者的個人理解這篇論文致力於解決當前多模態大語言模型（MLLMs）在自動駕駛應用中存在的關鍵挑戰，即將MLLMs從2D理解擴展到3D空間的問題。由於自動駕駛車輛（AVs）需要針對3D環境做出準確的決策，這項擴展顯得格外重要。 3D空間理解對於AV來說至關重要，因為它直接影響車輛做出明智決策、預測未來狀態以及與環境安全互動的能力。目前的多模態大語言模型（如LLaVA-1.5）通常只能處理較低解析度的影像輸入（例如），這是由於視覺編碼器的分辨率限制，LLM序列長度的限制。然而，自動駕駛應用需

See all articles

JS實作的3D拖曳翻頁效果程式碼_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題