2014年4月11日 星期五

讓圖片有更豐富的想像力



創造豐富想像力的 image effect 效果!
Picture 1
Picture 2
Picture 3
Picture 4
Picture 5
Picture 6





1 請於< head>xxx<head>之間或<body>之後寫入下列程式碼:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$('#lmccontainer img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.6','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});
</script>
2 請於於<head>xxx< head> 之間或<body>之後寫入下列CSS語法:
<style>
.lmccontainer{
width:600px;
height:400px;
margin:100px auto 0px auto;
border:10px solid #333;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}
.lmcwrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.lmcwrap a img {
border:none;
position:absolute;
top:-66.5px;
left:-150px;
height:500px;
opacity: 0.6;
-moz-opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>
3 請於欲編輯區域寫入下列 HTML :
<div id="lmccontainer" class="lmccontainer">
<div class="lmcwrap"> <img
src="第一張圖像網址"
alt="Picture 1"> </div>
<div class="lmcwrap"> <img
src="第二張圖像網址"
alt="Picture 2"> </div>
<div class="lmcwrap"> <img
src="第三張圖像網址"
alt="Picture 3"> </div>
<div class="lmcwrap"> <img
src="第四張圖像網址"
alt="Picture 4"> </div>
<div class="lmcwrap"> <img
src="第五張圖像網址"
alt="Picture 5"> </div>
<div class="lmcwrap"> <img
src="第六張圖像網址"
alt="Picture 6"> </div>
</div>

說明:
1.圖像的大小請先剪裁為600x600的正方形。

資料來源:PHOTO ZOOM OUT EFFECT WITH JQUERY


3 則留言:

  1. 老师,这个黑色边框上面会有留白,请问怎么消除呢

    回覆刪除
    回覆
    1. 原来在CSS里面的margin:100px auto 0px auto;

      刪除
    2. 對,你試對了
      margin: 0px auto 0px auto; 即可上下都沒有空白

      刪除