Flickr照片分享網(wǎng)的圖片預覽特效_圖片特效特效

Flickr照片分享網(wǎng)的圖片預覽特效，使用了jquery插件，貌似很不錯的效果。鼠標放到圖片上，圖片會縮小，像是鏡頭從近拉遠的感覺，是Flickr著名照片分享網(wǎng)上邊的一個效果，那些大網(wǎng)站有不少網(wǎng)頁特效都不錯，挺實用，大家有空也多去瞧瞧哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
        <title>Flickr照片分享網(wǎng)的圖片預覽特效</title> 
        <style type="text/css"> 
        *{
		    margin:0;
		    padding:0;
		}
		body{
		    background:url() no-repeat top left;
		}
		.wrap{
		    width:200px;
		    height:200px;
		    margin:0px;
		    overflow:hidden;
		    position:relative;
		    float:left;
		}
		.wrap a img  {
		    border:none;
		    position:absolute;   
		    top:-66.5px;
		    left:-150px;
		    height:500px;
		    opacity: 0.5;
		    -moz-opacity: 0.5;
		    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
		}
 
		</style> 
    </head> 
 
    <body> 
        <div   class="znjbzjn"   id="container" class="container"> 
            <div   id="znjbzjn"   class="wrap"> 
                <a href="/"> 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608698.jpg" alt="Picture 1"/> 
                </a> 
            </div> 
            <div   id="znjbzjn"   class="wrap"> 
                <a href="/"> 
 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608699.jpg" alt="Picture 2"/> 
                </a> 
            </div> 
            <div   id="znjbzjn"   class="wrap"> 
                <a href="/"> 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608700.jpg" alt="Picture 3"/> 
                </a> 
            </div> 
            <div   id="znjbzjn"   class="wrap"> 
 
                <a href="/"> 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608701.jpg" alt="Picture 4"/> 
                </a> 
            </div> 
            <div   id="znjbzjn"   class="wrap"> 
                <a href="/"> 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608702.jpg" alt="Picture 5"/> 
                </a> 
            </div> 
 
            <div   id="znjbzjn"   class="wrap"> 
                <a href="/"> 
                    <img src="http://p1.mb5u.com/texiao/1/20110225160608703.jpg" alt="Picture 6"/> 
                </a> 
            </div> 
        </div> 
        <div> 
            <a class="back" href="/"></a> 
        </div> 
 
         
        <script type="text/javascript" src="http://p1.mb5u.com/texiao/jquery1.3.2.js"></script> 
        <script type="text/javascript"> 
            $(function() {
				$('#container 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.5','height':'500px','top':'-66.5px','left':'-150px'});
					}
				);
            });
        </script> 
    </body> 
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-18

[收藏][報錯][返回列表]

相關圖片特效特效：

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些

相關鏈接：
復制本頁鏈接| 搜索Flickr照片分享網(wǎng)的圖片預覽特效
特效說明：
圖片特效模板-Flickr照片分享網(wǎng)的圖片預覽特效。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

Flickr照片分享網(wǎng)的圖片預覽特效_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些