快捷導(dǎo)航

使用jquery實(shí)現(xiàn)圖文切換效果另加特效

更新時(shí)間：2013年01月20日 16:28:07 作者：

白天活干完，弄個(gè)jquery仿凡客誠(chéng)品圖片切換的效果;以前寫(xiě)的不是很好，今天重新做個(gè)jquery特效，其實(shí)很簡(jiǎn)單,感興趣的朋友可以了解下哦，希望本文對(duì)你有幫助

前端開(kāi)發(fā)過(guò)程中需要不斷學(xué)習(xí)，不斷溫習(xí)。最近計(jì)劃白天繼續(xù)溫習(xí)jquery，晚上學(xué)習(xí)下原生javascript，然后利用一些時(shí)間做做網(wǎng)站推廣SEO來(lái)著。計(jì)劃暫時(shí)這些。
白天活干完，弄個(gè)jquery仿凡客誠(chéng)品圖片切換的效果

以前寫(xiě)的不是很好，今天重新做個(gè) jquery特效，其實(shí)很簡(jiǎn)單，漠然回首也就那回事。
先來(lái)個(gè)原型吧,鋒利的jquery第一個(gè)例子，相信大家都很熟悉。沒(méi)錯(cuò)，你絕對(duì)沒(méi)看錯(cuò)。
代碼如下

復(fù)制代碼代碼如下:

 
<div class="menu"> 
<div class="has_children"> 
<span>第一張</span> 
<a href="">11111111</a> 
<a href="">11111111</a> 
<a href="">11111111</a> 
<a href="">11111111</a> 
<a href="">11111111</a> 
<a href="">11111111</a> 
</div> 
<div class="has_children"> 
<span>第二張</span> 
<a href="">22222222</a> 
<a href="">22222222</a> 
<a href="">22222222</a> 
<a href="">22222222</a> 
<a href="">22222222</a> 
<a href="">22222222</a> 
</div> 
<div class="has_children"> 
<span>第三張</span> 
<a href="">33333333</a> 
<a href="">33333333</a> 
<a href="">33333333</a> 
<a href="">33333333</a> 
<a href="">33333333</a> 
<a href="">33333333</a> 
</div> 
<div class="has_children"> 
<span>第四張</span> 
<a href="">44444444</a> 
<a href="">44444444</a> 
<a href="">44444444</a> 
<a href="">44444444</a> 
<a href="">44444444</a> 
<a href="">44444444</a> 
</div> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
// $(".has_children").click(function(){ 
// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//點(diǎn)擊后效果 
// }) 
$(".has_children").mouseover(function(){ 
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠標(biāo)移動(dòng)過(guò)去效果 
}) 
}) 
</script> 