創造豐富想像力的 image effect 效果！
| 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
老师，这个黑色边框上面会有留白，请问怎么消除呢
回覆刪除原来在CSS里面的margin:100px auto 0px auto;
刪除對，你試對了
刪除margin: 0px auto 0px auto; 即可上下都沒有空白