jquery鼠标响应式显示全图特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标响应式显示全图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Photo Zoom Out Effect with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Photo Zoom Out Effect with jQuery - Demonstation" />
        <meta name="keywords" content="photo, image, zoom out, jQuery" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    </head>
    <body>
        <div id="container" class="container">
            <div class="wrap">
                <a href="#">
                    <img src="images/image1.jpg" alt="Picture 1"/>
                </a>
            </div>
            <div class="wrap">
                <a href="#">
                    <img src="images/image2.jpg" alt="Picture 2"/>
                </a>
            </div>
            <div class="wrap">
                <a href="#">
                    <img src="images/image3.jpg" alt="Picture 3"/>
                </a>
            </div>
            <div class="wrap">
                <a href="#">
                    <img src="images/image4.jpg" alt="Picture 4"/>
                </a>
            </div>
            <div class="wrap">
                <a href="#">
                    <img src="images/image5.jpg" alt="Picture 5"/>
                </a>
            </div>
            <div class="wrap">
                <a href="#">
                    <img src="images/image6.jpg" alt="Picture 6"/>
                </a>
            </div>
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="jquery-1.8.2.min.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>

CSS代码(style.css):

*{margin:0;padding:0;}
body{background:#fff url(../title.png) no-repeat 25% 20px;}
.container{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;}
a.back{width:184px;height:32px;position:absolute;bottom:10px;left:10px;background:transparent url(../back.png) 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);}

附件:下载该文件资源,减少时间成本(增值服务)