欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js和jquery分別實(shí)現(xiàn)橫向?qū)Ш讲藛涡Ч?/h1>
 更新時(shí)間：2016年05月13日 17:00:23   作者：yenga  
這篇文章主要介紹了原生js和jquery分別實(shí)現(xiàn)橫向?qū)Ш讲藛涡Ч南嚓P(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了原生js和jquery橫向?qū)Ш讲藛蔚闹谱鞣椒?，供大家參考，具體內(nèi)容如下

原生javascript實(shí)現(xiàn)：
這一次要實(shí)現(xiàn)的是鼠標(biāo)放上去以后，菜單欄被選中的那一欄水平拉伸，鼠標(biāo)離開后水平收縮。并帶有一定的時(shí)間性，使肉眼能夠看出其拉伸收縮的動(dòng)畫效果。
開始用javascript進(jìn)行編寫：
首先在之前水平方向的導(dǎo)航欄上進(jìn)行操作，將第一欄和選中欄的樣式只改變?yōu)楸尘白兒谏淖肿儼咨?br /> .on,a:hover{background:#000000;color:#FFFFFF;} 

之后開始寫javascript腳本：

<script> 
 window.onload=function(){ 
 var A=document.getElementsByTagName("a"); 
  
 for(var i=0;i<A.length;i++) 
 { 
  A[i].onmouseover=function(){ 
  clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
    
   if(This.offsetWidth>=200) 
    { 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth+8+"px"; 
     
   },50) 
  } 
   
   A[i].onmouseout=function(){ 
   clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
   if(This.offsetWidth<=120) 
    { 
    This.style.width="120px"; 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth-8+"px"; 
    
   },50) 
  } 
   
   
  } 
   
 } 
  
 </script>

剖析一下這段代碼：
第一層，window.onload，頁(yè)面加載的時(shí)候調(diào)用這個(gè)函數(shù)。
第二層，for循環(huán)，用document.getElementsByTagName("a")獲得導(dǎo)航欄數(shù)組，遍歷為其添加第三層的效果。
第三層，一個(gè)onmouseover，一個(gè)onmouseout,分別實(shí)現(xiàn)鼠標(biāo)覆蓋和鼠標(biāo)離開的效果。
第四層，setInterval和clearInterval方法，參數(shù)50ms.
第五層，核心部分，修改this.style.width，每次50ms加減8px,增加判斷語(yǔ)句到達(dá)邊界。
細(xì)節(jié)部分：采用先加減8px再進(jìn)行判斷，我認(rèn)為應(yīng)該倒過來，不必要先處理再判斷，會(huì)浪費(fèi)資源。還有就是在第三層開始后必須先清除時(shí)間機(jī)制，否則會(huì)容易出現(xiàn)重疊動(dòng)畫的紊亂狀況。
最后實(shí)現(xiàn)的動(dòng)畫就是：鼠標(biāo)放上去某一欄后，120px的菜單欄將每50ms伸長(zhǎng)8px,直至到達(dá)200px停下；當(dāng)鼠標(biāo)離開后，該欄又將以50ms收縮8px的速度恢復(fù)到120px.
看一下總代碼和效果圖：

<!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=utf-8" /> 
<title>導(dǎo)航欄</title> 
<style> 
*{margin:0;padding:0;font-size:20px} 
ul{list-style:none;height:50px;border-bottom:#000000 solid;padding-left:30px}  
li{float:left;margin-top:20px;} 
a{text-decoration:none;display:block;height:30px;line-height:30px;width:120px;margin-bottom:1px;background:#FFFFFF;color:#000000;text-align:center} 
.on,a:hover{background:#000000;color:#FFFFFF;} 
</style> 
<script> 
 window.onload=function(){ 
 var A=document.getElementsByTagName("a"); 
  
 for(var i=0;i<A.length;i++) 
 { 
  A[i].onmouseover=function(){ 
  clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
    
   if(This.offsetWidth>=200) 
    { 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth+8+"px"; 
     
   },50) 
  } 
   
   A[i].onmouseout=function(){ 
   clearInterval(this.time); 
   var This=this; 
   This.time=setInterval(function(){ 
   if(This.offsetWidth<=120) 
    { 
    This.style.width="120px"; 
    clearInterval(This.time); 
    } 
   This.style.width=This.offsetWidth-8+"px"; 
    
   },50) 
  } 
   
   
  } 
   
 } 
  
 </script> 
</head> 
<ul> 
<li> 
<a class="on" href="#">首 頁(yè)</a> 
</li> 
<li> <a href="#">今日新聞</a></li> 
<li><a href="#">周邊故事</a></li> 
<li><a href="#">天氣預(yù)報(bào)</a></li> 
<li><a href="#">好書推薦</a></li> 
</ul> 
</html>

下面用jquery實(shí)現(xiàn)同樣的效果：
先下載一個(gè)jQurey1.2.6，引用到html中去

<script type="text/javascript" src="jquery-1.2.6.js"></script> 
下載地址：Jquery1.2.6下載
[html] view plain copy print?
<script> 
$(function(){ 
 
 $('a').hover( 
  
  function(){ 
   $(this).stop().animate({"width":"200px"},200  );}, 
  function(){ 
   $(this).stop().animate({"width":"120px"},200 
   );}  
 ) 
 }) 
 
</script>

同樣，這段代碼是包含在$(function(){})中，相當(dāng)于window.onload的作用。
之后$('a')獲取a標(biāo)簽，其提供一個(gè)hover方法，這個(gè)方法里面要提供兩個(gè)函數(shù)，一個(gè)移入一個(gè)移出，我們將其設(shè)定為移入時(shí)200ms增加到200px,移出時(shí)200ms收縮到120px.
animate即自定義動(dòng)畫的方法，在這里是設(shè)置寬度動(dòng)態(tài)變化。
要在處理前用stop（），把上個(gè)動(dòng)畫清理掉。
效果是一樣的，但代碼量少。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論