我爱模板网 > 特效插件 > 图像特效 >  鼠标经过图片缩小显示效果的jQuery图片缩放代码正文

鼠标经过图片缩小显示效果的jQuery图片缩放代码

特效介绍
jQuery图片缩放

    鼠标经过图片缩小显示效果的jQuery图片缩放代码,当鼠标滑过图片时,该图片会缩小以显示的更全更清晰,并且会高亮显示,并且周围图片会模糊放大。
使用方法
1、在head区域引入下面的css样式和js代码:
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#col 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>
2、把以下代码拷贝到你想引用的地方
<div id="col">
    <div class="pic">
        <a href="http://www.5imoban.net/" target="_blank">
            <img src="images/veerles-blog_1.jpg" alt="veerles-blog"/>
        </a>
    </div>
    <div class="pic">
        <a href="http://www.5imoban.net" target="_blank">
            <img src="images/veerles-blog_2.jpg" alt="veerles-blog"/>
        </a>
    </div>
    <div class="pic">
        <a href="http://www.5imoban.net" target="_blank">
            <img src="images/veerles-blog_3.jpg" alt="veerles-blog"/>
        </a>
    </div>
    <div class="pic">
        <a href="http://www.5imoban.net" target="_blank">
            <img src="images/veerles-blog_4.jpg" alt="veerles-blog"/>
        </a>
    </div>
    <div class="pic">
        <a href="http://www.5imoban.net" target="_blank">
            <img src="images/pics_relove_b.jpg" alt="relove"/>
        </a>
    </div>
    <div class="pic">
        <a href="http://www.5imoban.net" target="_blank">
            <img src="images/flowergirl-full.jpg" alt="flowergirl"/>
        </a>
    </div>
</div>


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:JS+css边框圆角代码,简单方便挂载 下一篇:5种没有图片的css圆角效果
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢