jQuery例項:圖片展示效果
阿新 • • 發佈:2019-02-03
開始之前,我就喜歡先看一下效果:
http://www.cnblogs.com/QLeelulu/archive/2008/04/01/1133112.html張娜拉,韓國的 My Digital Story 不知道是什麼圖來的 我的Logo,Studio拼錯了都不知道,汗一個。 四季圖吧這是,但我分不清夏和秋
先看Html程式碼:
<divid="photoShow">
<divclass="photo">
<imgsrc="p1.jpg"/>
<span>張娜拉,韓國的</span>
</div>
<imgsrc="p2.jpg"/>
<span>My Digital Story</span>
</div>
<divclass="photo">
<imgsrc="p3.jpg"/>
<span>不知道是什麼圖來的</span>
</div>
<divclass="photo">
<imgsrc="p4.jpg"/>
<span>
</div>
<divclass="photo">
<imgsrc="p5.jpg"/>
<span>四季圖吧這是,但我分不清夏和秋</span>
</div>
</div>
</div>
然後我們寫一個CSS來控制一下這個HTML的樣式,CSS比較菜,將就吧,達到效果就好:
css程式碼:
#photoShow{
border: solid 1px #C5E88E;
overflow
width: 580px;
height: 169px;
background: #C5E88E;
position: absolute;
}
.photo{
position: absolute;
top: 0px;
width: 490px;
height: 169px;
}
.photo img{
width: 490px;
height: 169px;
}
.photo span{
padding: 5px 0px 0px 5px;
width: 490px;
height: 30px;
position: absolute;
left: 0px;
bottom: -32px;/*介紹內容開始的時候不顯示*/
background: black;
filter: alpha(opacity=50);/*IE透明*/
opacity: 0.5;/*FF透明*/
color: #FFFFFF;
}
完成上面的準備工作後,我們下面開始jQuery程式碼。
首先就是做一些初始化的工作:
$(document).ready(function(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //圖片數量 var divWidth = parseInt($("#photoShow").css("width")); //顯示寬度 var imgWidth = parseInt($(".photo>img").css("width")); //圖片寬度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //顯示其中一張圖片時其他圖片的顯示寬度 var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //圖片介紹資訊的高度 imgDivs.each(function(i){ $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)}); $(imgDivs[i]).hover(function(){ //處理滑鼠進入的時候 },function(){ //處理滑鼠離開的時候 }); }); });
首先我們定義了一些變數,方便我們後面使用。 然後就是使用了一個 each() 的函式在每一個匹配的元素進行事件處理。這裡是每一個<div class="photo"> 元素分別進行事件的處理。 然後看一下下面這一句:
$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums), "top":"0px"});
這句是通過CSS來控制每一個圖片的層次和顯示位置。
然後就是用一個 hover() 函式來處理滑鼠的hover事件。 首先看一下滑鼠進入圖片的時候該怎麼處理:
$(imgDivs[i]).hover(function(){ //$(this).find("img").css("opacity","1"); $(this).find("span").stop().animate({bottom: 0}, "slow"); imgDivs.each(function(j){ if(j<=i){ $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow"); }else{ $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow"); } }); },function(){ //處理滑鼠離開時候的事件 });
在這裡所有的動畫效果都是通過 animate() 函式修改CSS來控制元素的顯示位置來實現的。 這裡注意一下就是在呼叫 animate() 函式前都呼叫了 stop() 函式。stop() 函式是用來停止當前元素的所有執行中的事件。 j<=i 的判斷就是判斷滑鼠hover的當前圖片和該圖片前面的圖片與該圖片後面的圖片的分割線。 滑鼠離開的處理也差不多,下面之完整的程式碼:
$(document).ready(function(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //圖片數量 var divWidth = parseInt($("#photoShow").css("width")); //顯示寬度 var imgWidth = parseInt($(".photo>img").css("width")); //圖片寬度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //顯示其中一張圖片時其他圖片的顯示寬度 var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //圖片介紹資訊的高度 imgDivs.each(function(i){ $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)}); $(imgDivs[i]).hover(function(){ //$(this).find("img").css("opacity","1"); $(this).find("span").stop().animate({bottom: 0}, "slow"); imgDivs.each(function(j){ if(j<=i){ $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow"); }else{ $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow"); } }); },function(){ imgDivs.each(function(k){ //$(this).find("img").css("opacity","0.7"); $(this).find("span").stop().animate({bottom: -spanHeight}, "slow"); $(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow"); }); }); }); });
本人水平一般,程式碼還有待改善。