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

2024-05-06 14:19:52

字體：大中小

供稿：網(wǎng)友

前端開(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ò)。
代碼如下
代碼如下:
<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>

原書(shū)是點(diǎn)擊后的效果，我又加了個(gè)鼠標(biāo)移動(dòng)上去。
現(xiàn)在適當(dāng)?shù)男薷南耤ss和js就可以了。
在線效果原型DEMO 在線效果圖文切換DEMO

上一篇：重構(gòu)Javascript代碼示例(重構(gòu)前后對(duì)比)

下一篇：THREE.JS入門(mén)教程(1)THREE.JS使用前了解