jQuery實現的 “滑動門”（跟隨鼠標滑動滑動的tab選項卡）效果

原創 涅槃 2018-08-22 22:47
  1. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4. <meta http-equiv="Content-Type"  content= "text/html; charset=utf-8"  />  
  5. <style>  
  6. ul,li{  
  7.   background-color:#999;  
  8.   margin:0px;  
  9.   padding:0px;  
  10.   list-style:none;  
  11.   color:#fff;  
  12. }  
  13. li{  
  14.   padding:3px;  
  15.   float:left;  
  16.   margin-right:2px;  
  17.   border:#FFF 1px solid;  
  18. }  
  19. div{  
  20.     
  21.   clear:left;  
  22.   height:150px;  
  23.   width:300px;  
  24.   background-color:#666;  
  25.   display:none;  
  26. }  
  27. li.tabin{  
  28.   background-color:#666;  
  29.   border:#666 solid 1px;  
  30. }  
  31. div.contentin{  
  32.     padding:3px;  
  33.     display:block;  
  34.     color:#FFF;  
  35. }  
  36.   
  37. </style>  
  38. <title>jQuery實現常見的滑動門效果</title>  
  39. <script language="javascript"  type= "text/javascript"  src= "../include/jquery-1.5.1.min.js" ></script>  
  40.   
  41. <script type="text/javascript" >  
  42. var  timeoutid;  
  43.   $(function (){  
  44.         
  45.      /*  
  46.      實現滑動門核心  
  47.      1、把當前樣式（li、div選中狀態）移除  
  48.      2、設置鼠標移動到的當前li對象的樣式選中狀態  
  49.      3、設置鼠標移動到的當前li對象所對應的div的樣式選中狀態  
  50.         如何設置當前li對象所對應的div爲選中狀態?  
  51.           
  52.         解決：遍歷所有的li並且根據當前li對象的索引值去設置對應索引值的div  
  53.      */    
  54.    //遍歷所有的li   
  55.     $("li" ).each( function (index){  
  56.      //處理鼠標移動到li上的事件   
  57.      $(this).mouseover(function (){  
  58.            
  59.           var  liObj=$(this);  
  60.           timeoutid=setTimeout(function (){     
  61.           //清空所有的處於選中狀態的樣式   
  62.           $("li.tabin" ).removeClass();  
  63.           $("div.contentin" ).removeClass();  
  64.           //設置當前li索引值對應的div   
  65.           $("div" ).eq(index).addClass( "contentin" );  
  66.            //設置當前的li和當前li所對應的div   
  67.             liObj.addClass("tabin" );  
  68.              
  69.           },300);  
  70.             
  71.       }).mouseout(function (){  
  72.           clearTimeout(timeoutid);  
  73.           });  
  74.        
  75.    });  
  76.  });  
  77. </script>  
  78. </head>  
  79.   
  80. <body>  
  81. jQuery實現常見的滑動門效果  
  82. <hr>  
  83.    <ul>  
  84.     <li class = "tabin" >標籤1</li>  
  85.     <li>標籤2</li>  
  86.     <li>標籤3</li>  
  87.    </ul>  
  88.    <div class = "contentin" >標籤1內容文字</div>  
  89.    <div>標籤2內容文字</div>  
  90.    <div>標籤3內容文字</div>  
  91. </body>  
  92. </html> 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript 本地存儲

本地存儲簡介 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的 web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲 解決了cookie存儲空間不足的問題（cookie的存儲

OliGit 2020-07-08 12:27:32

JavaScript 音頻插件和圖表插件

howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s

OliGit 2020-07-08 12:27:30

PHP和Javascript的JSON交互（處理一個二維數組）(轉)

xmphoenix 2020-07-08 12:00:47

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

（轉）js正則表達式驗證大全 js正則表達式驗證大全（轉）

js正則表達式驗證大全（轉） /判斷輸入內容是否爲空    function IsNull(){        var str = document.getElementById('str').value.trim();        i

不及格的程序員-八神 2022-11-01 14:10:37

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

JavaScript中的window對象

window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下       open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)",                "toolbar=?,menubar=?,

windy8833 2020-07-08 12:23:53

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

消除js的中文 亂碼 ！

在網頁中引用計數文件，一遇到中文就會出現亂碼！很頭疼，在網上找了很久終於找到了答案。   在引用的網頁插入<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

qingzhizhu888 2020-07-08 11:55:20

react 讀取excel中的內容並解析成json格式的

引用xlsx庫來完成這個功能 下載庫：npm下載可能會報錯，用yarn正常 npm install xlsx --save //or yarn add xlsx 模塊導入： import XLSX from 'xlsx'; 基

Volon Kou 2020-07-08 11:50:48

三個json數組之間的數據一一匹配組合

需求： 將以下三個json數組的數據一一匹配組合 ["S","M","L"],["R","B"],["X","Y","Z"] 代碼實現： Zuhe = (data) => { let heads = data[0];

Volon Kou 2020-07-08 11:50:48

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

微信小程序 json 數組push 不重複 數據

ans_click: function (e,that,json, pageindex) { var id = e.currentTarget.dataset.id; var args = json.question

东边的小山 2020-07-08 11:49:26

promise reject 狀態

promise reject 其實是一種狀態 作爲then 的第二個參數進行傳遞 或者在 catch中使用 當then第二個參數存在時，優先使用第二個參數而不是用catch 相當於有選擇性地進行回調

阿冰介 2020-07-08 11:48:15

js獲取某個日期的起始週日期及兩個日期的間隔天數

//獲取起始周 var time=$("#exportWeek").val(); var time_=new Date(Date.parse(time.replace(/-/g,"-"))); var now = new Date(ti

Agwenbi 2020-07-08 11:38:51