前端開發過程中需要不斷學習,不斷溫習。最近計畫白天繼續溫習jquery,晚上學習下原生javascript,然後利用一些時間做網站推廣SEO來著。計劃暫時這些。 白天活乾完,弄個jquery仿凡客誠品圖片切換的效果 以前寫的不是很好,今天重新做個 jquery特效,其實很簡單,漠然回首也就那回事。 先來個原型吧,鋒利的jquery第一個例子,相信大家都很熟悉。沒錯,你絕對沒看錯。 代碼如下 複製代碼 代碼如下: 第一張 11111111 11111111 11111111 1111111 11111111 11111111 第二張 span> 2222222 22222222 22222222 22222222 22222222 2222222 第三張 33333333 33333333 33333333 33333333 33333333 33333333 第四張 44444444 44444444 4444444 444444444 44444444 44444444 <BR>$(document).ready(function(){ <BR>// $(".has_children").click(function(){ <BR>// $(this). addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//點擊後效果<BR>// }) <BR>$(".has_children").mouseover(function(){ <BR>$(this).addClass("highlight").children("a").show().end ().siblings().removeClass("highlight").children("a").hide();//滑鼠移動過去效果<BR>}) <BR>}) <BR> 原書是點擊後的效果,我又加了個滑鼠移動上去。 現在適當的修改下css和js就可以了。 線上效果原型DEMO 線上效果圖文切換DEMO