QQ空间相册展示特效
<!doctype html>
<html lang="en">
? ? ?<head>
? ? ? ? ?<title>QQ空間相冊展示特效<title>
<style>
*{margin:0;padding:0;}
#photo{
width:984px;
height:600px;
background:#aaa;
margin:50px auto; ? ? ? ? ? ?
}
#photo img{
float:left;/*左浮動：與父元素的左端對齊，依次的往右端顯示，顯示不下就換行*/
margin:10px;
border:4px solid #fff;
}
#gray{
position:fixed;/*固定定位：相對于瀏覽器窗口定位*/
left:0;/**距離參考物左端的距離/
right:0;
width:100%
height:100%;/*與瀏覽器等高*/
backgound:rgba(0,0,0,.5);
display:none;
}
.bigImg{
position:absolute;/*絕對定位：相對于有定位屬性（固定，相對，絕對）的第一父元素*/
top:50%;
left:50%
margin-left:-325px;
margin-top:-203px;
width:650px;
height:407px
border:10px solid #fff;
/*自適應居中
第一種方法：
margin/padding:百分比設置具體的值
第二種方法：
position:absolute;left/top用百分比布置
第三種方法：
postion:absolute;left:50%;top:50%;
第四種：定位和margin配合使用 不需要計算
posiotn:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
*/
background:url(images/1.jpg) no-repeat;
background-position:center;
backround-size:contain;/*背景尺寸：等比例縮放*/
display:none;
}
.prev{
postion:absolute;//不一定相對于relative
left:-70px
top:175px;
width:18px;
height:35px;
background:url("images/dirl.jpg");
}
.next{
.prev{
postion:absolute;//不一定相對于relative
right:-70px//距離參考物右端距離 在參考物的右端就是負值
top:175px;
width:18px;
height:35px;
background:url("images/dirl.jpg");
?
}
</style>
? ? </head>
? ? <body>
? ? ? ? <div id="photo">
? ? ? ? ? ?<img src="images/1.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/2.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/3.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/4.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/5.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/6.jpg" width="300" height="187" alt="冰冰老師">、
? ? ? ? ? ?<img src="images/7.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/8.jpg" width="300" height="187" alt="冰冰老師">
? ? ? ? ? ?<img src="images/9.jpg" width="300" height="187" alt="冰冰老師"> ? ? ? ??
? ? </div>
? ? <div class="gray"></div>
? ? ?<div class="bigImg">?
? ? ? ? ? ?<div class="prev"></div>
? ? ? ? ? ?<div class="next"></div>
? ? ?</div>?
<script src="js/jquery.js"></script>
var url="";//定義一個變量來保存圖片路徑
index=$(this).index()+1;//點擊誰就獲取誰的序列號
$("#photo img").click(function(){
? ? $("#gray").show();
? ? $(".bigImg").show();
? ? ?//點擊哪個圖片就獲取哪個圖片的路徑并給大圖盒子
? url=$(this).attr("src");
$(".bigImg").css("background-image","url("+url+")");
});
? ? $("#gray").click(function(){
? ? ? $("this").hide();
? ? ? $(".bigImg").hide();
})
$("prev").click(function(){
index--;
if(index == 0)
{
index=9;
}
$(".bigImg").css("background-image","url(images/"+index+".jpg)");
});
$("next").click(function(){
index++;
if(index>9)
{
index=1;
}
$(".bigImg").css("background-image","url(images/"+index+".jpg)");
});
?
</body>
?
</html>
?
?
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/think90/p/5804977.html
總結
以上是生活随笔為你收集整理的QQ空间相册展示特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 民国时期香港有荣华月饼吗？
- 下一篇： 下列哪些不是榆林的特色美食有洋芋擦擦,碗