zoukankan      html  css  js  c++  java
  • 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

     <div style=" 620px; margin: 40px auto 0 auto;">
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/1-1.jpg" /></div>
                    <div>
                        <img src="image/1-2.jpg" /></div>
                </div>
            </div>
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/2-1.jpg" /></div>
                    <div>
                        <img src="image/2-2.jpg" /></div>
                </div>
            </div>
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/3-1.jpg" /></div>
                    <div>
                        <img src="image/3-2.jpg" /></div>
                </div>
            </div>
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/4-1.jpg" /></div>
                    <div>
                        <img src="image/4-2.jpg" /></div>
                </div>
            </div>
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/1-1.jpg" /></div>
                    <div>
                        <img src="image/1-2.jpg" /></div>
                </div>
            </div>
            <div class="img">
                <div class="inner">
                    <div>
                        <img src="image/2-1.jpg" /></div>
                    <div>
                        <img src="image/2-2.jpg" /></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(".img").mouseenter(function () {
                var $this = $(this);
                var $div = $this.find(".inner div");
                $div.eq(1).stop();
                $div.eq(1).css({ "top": "0px", "left": "0px", "width": "200px", "height": "200px" });
                $div.eq(0).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "0" }, 500);
                $div.eq(1).stop().animate({ "top": "-25px", "left": "-25px", "width": "250px", "height": "250px", "opacity": "1" }, 500);
            }).mouseleave(function () {
                var $this = $(this);
                var $div = $this.find(".inner div");
                $div.eq(0).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "1" }, 500);
                $div.eq(1).stop().animate({ "top": "0", "left": "0", "width": "200px", "height": "200px", "opacity": "0" }, 500);
            });    
        </script>

    via:http://www.w2bc.com/Article/41297

  • 相关阅读:
    mongodb单机搭建
    zeus部署
    hive单机部署
    datax部署
    hadoop/hbase/hive单机扩增slave
    读取Jar中的json文件
    Mybatis 一对多 简单映射配置
    java/kotlin 读取文件、写入文件
    ES6中Json、String、Map、Object之间的转换
    java 客户端发起http请求2
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4546233.html
Copyright © 2011-2022 走看看