本效果使用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. SpringMVC 数据校验

    1.引入jar包 2.配置验证器 <!-- 配置验证器 --> <bean id="myvalidator" class="org.springfram ...

  2. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  3. [异常特工]android常见bug跟踪

    前言 对app的线上bug的收集(友盟.云捕等)有时会得到这样的异常堆栈信息:没有一行代码是有关自身程序代码的.这使得对bug的解决无从下手,根据经验,内存不足OOM,Dialog关闭,ListVie ...

  4. node(ActiveMq)

    简单尝试了node下的ActiveMQ 1.下载apache-activemq-5.9.0,执行bat文件: 2.登录http://localhost:8161/admin可查看其管理后台: 3.安装 ...

  5. C++虚函数和函数指针一起使用

    C++虚函数和函数指针一起使用,写起来有点麻烦. 下面贴出一份示例代码,可作参考.(需要支持C++11编译) #include <stdio.h> #include <list> ...

  6. MySQL对时间戳的转换处理

    开发中很多时候在数据库里都会存储Long类型的时间戳,而时间戳做比对会相对麻烦 我的绝决方案: SELECT FROM_UNIXTIME(LEFT(create_time,10), '%Y-%m-%d ...

  7. Google翻译之路

    如何将整个网站都翻译成某种语言,想必大家都有碰到这样的问题吧. 如果能够访问Google的话, 那这个太容易不过了. 来看,下面的就是Google提供的直接翻译某个网站. http://transla ...

  8. 【SQL】关于无法附加文件的错误

    [SQL]关于无法附加文件的错误 1.错误信息如下: 2.估计是权限问题右击属性,把权限开一下 3.然后就附加成功了~~ ——————————————————————————————————————— ...

  9. SQL Server系列目录

    一.SQL Server基础部分 1  数据库概念及规范化设计 1.1 数据库物理模式设计 1.2 Microsoft SQL Server Management Studio模板资源管理器 2 数据 ...

  10. SQL Server-分页方式、ISNULL与COALESCE性能分析（八）

    前言 上一节我们讲解了数据类型以及字符串中几个需要注意的地方,这节我们继续讲讲字符串行数同时也讲其他内容和穿插的内容,简短的内容,深入的讲解,Always to review the basics. ...