本效果使用jQuery和CSS实现了图片列表，当鼠标移入时图片向左微动，移出则复原。

效果展示: http://hovertree.com/texiao/jquery/88/

效果图如下：

其中的jQuery事件使用mouseenter 和 mouseleave ，事件绑定方法使用新推荐的on方法。具体请参考：
http://hovertree.com/h/bjaf/ug1fikri.htm

代码如下：

<!DOCTYPE html>

<html>

<head><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>jQuery实现图片列表鼠标移入微动_何问起</title><base target="_blank" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">

        body, div, li, p, img, a {

            margin: 0;

            padding: 0;

        }

        .hovertreecontainer {

            width: 370px;

            margin: 50px auto;

        }

            .hovertreecontainer a {

                text-decoration: none;

            }

        .hovertree-item-box {

            height: 120px;

            width: 185px;

            position: relative;

            padding: 10px;

            box-sizing: border-box;

            float: left;

        }

            .hovertree-item-box .title {

                width: 80px;

                height: 100%;

                color: #4998a1;

                font-size: 14px;

            }

            .hovertree-item-box.odd {

                border-bottom: 1px solid #CCC;

                border-right: 1px solid #CCC;

            }

            .hovertree-item-box.even {

                border-bottom: 1px solid #CCC;

            }

            .hovertree-item-box.nobottom {

                border-bottom: none;

            }

            .hovertree-item-box .hovertree-img-box {

                width: 80px;

                height: 80px;

                overflow: hidden;

                position: absolute;

                right: 10px;

                bottom: 5px;

            }

        .hovertree-img-box img {

            width: 100%;

            height: 100%;

        }

        .hovertreecontainer:after {

            content: "";

            display: block;

            clear: both;

        }

    </style>

</head>

<body>

    <div class="hovertreecontainer"><h2>jQuery实现图片列表鼠标移入微动</h2>

        <a href="http://hovertree.com/texiao/css/20/">

            <div class="hovertree-item-box odd">

                <div class="title">春节对联</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif"></div>

            </div>

        </a>

        <a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">

            <div class="hovertree-item-box even">

                <div class="title">下雨天</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/f748s0ko.jpg"></div>

            </div>

        </a>

        <a href="http://hovertree.com/h/bjae/0st5ww13.htm">

            <div class="hovertree-item-box odd">

                <div class="title">磨砂玻璃</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/agagq0or.jpg"></div>

            </div>

        </a>

        <a href="http://hovertree.com/menu/texiao/">

            <div class="hovertree-item-box even">

                <div class="title">网页特效</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201512/r51a22uy.gif"></div>

            </div>

        </a>

        <a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm">

            <div class="hovertree-item-box odd nobottom">

                <div class="title">何问起统计文件数</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/bjafjd/iofopnro.png"></div>

            </div>

        </a>

        <a href="http://hovertree.com/h/bjaf/hovertreeimg.htm">

            <div class="hovertree-item-box even nobottom">

                <div class="title">HovertreeImg</div>

                <div class="hovertree-img-box"><img src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"></div>

            </div>

        </a>

    <div><a href="http://hovertree.com/h/bjaf/4mv4wgmj.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/texiao/">特效</a></div>

    </div>

    <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.3.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.hovertreecontainer .hover'+'tree-item-box').on('mouseenter', function (ev) {

                var oImgBox = $(this).find('.hovertree-img-box');

                $(oImgBox).stop(true).animate({

                    right: '20px'

                }, "normal");

            }).on('mouseleave', function (ev) {

                var oImgBox = $(this).find('.hovertree-img-box');

                $(oImgBox).stop(true).animate({

                    right: '10px'

                }, "normal");

            });

        });

    </script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/4mv4wgmj.htm

特效汇总：http://www.cnblogs.com/jihua/p/webfront.html

jQ图片列表光标移动动画的更多相关文章

  1. WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...

  2. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  3. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  4. 【转】WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...

  5. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  7. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  8. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  9. WP8_区分滑动和点击(在图片列表中)

    在windows phone中,对于一个页面中 有图片列表的,滑动的时候,很容易被误认为是点击了图片,而打开图片详细信息等,原意是滑动列表,由此对图片添加2个事件,来控制其点击行为(滑动的时候,基本不 ...

随机推荐

  1. 关于Genymotion下载比较慢的解决办法

    Genymotion号称Android模拟器中运行最快的,但是服务器在国外,Android镜像下载起来那个速度就不想说了. Add new device后下载速度太慢了,容易失败 先登录,然后add, ...

  2. Android 微信第三方登录（个人笔记）

    今天在写微信登录,花了半天时间搞定.然后写下自己的笔记,希望帮助更多的人...欢迎各位指教. 微信授权登录,官方说的不是很清楚.所以导致有一部分的坑. 微信注册应用平台的应用签名,下载 微信签名生成工 ...

  3. asp.net core 实战之 redis 负载均衡和"高可用"实现

    1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的"高可用"实现, 呵呵双引号的"高可用"并不是 ...

  4. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  5. 如何删除webstrom中生成的.idea wrokspace

    首先说下遇到的问题,之前一直是通过webstrom来操纵github 以及git ,包括切换,生成分支,pull,push代码,这几天心血来潮 通过git代码进行了一次这些操作,然后当我在gitlab ...

  6. 1.Kali安装到移动硬盘或者U盘中~Linux系通用方法(包括Android)

    0.1.保证这个服务必须启动(虚拟机服务最好都启动) 0.2.看看U盘接口类型是否对应 1.安装第一步 2.安装第二步,选择kali镜像 3.设置存放位置(上面的名字无所谓,最后不会用它的,虚拟机只是 ...

  7. 通读AFN③--HTTPS访问控制(AFSecurityPolicy)，Reachability(AFNetworkReachabilityManager)

    这一篇主要介绍使用AFN如何访问HTTPS网站以及这些做法的实现原理,还有介绍AFN的网络状态监测部分AFNetworkReachabilityManager,这个模块会和苹果官方推荐的Reachab ...

  8. Chrome浏览器Cookie解密

    做过 web 开发的都知道:浏览器会把重要的认证登录认证信息存放到 cookie 中,在 cookie 有效期内,再次访问这个网站的时候就可以直接从 cookie 中获取到登录信息,这样就可以实现自动 ...

  9. Android线程管理之ExecutorService线程池

    前言: 上篇学习了线程Thread的使用,今天来学习一下线程池ExecutorService. 线程管理相关文章地址: Android线程管理之Thread使用总结 Android线程管理之Execu ...

  10. 配置 LBaaS - 每天5分钟玩转 OpenStack（121）

    上一节学习了 Neutron LBaaS 的原理,今天开始实践.首先在配置中启用 LBaaS 服务. Neutron 通过 lbaas plugin 和 lbaas agent 提供 LBaaS 服务 ...