本效果使用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. SQL字符串函数

    LEN() :计算字符串长度(字符的个数.)datalength();//计算字符串所占用的字节数,不属于字符串函数.测试varchar变量与nvarchar变量存储字符串a的区别.见备注1.LOWE ...

  2. Oracle SQL Developer 连接 MySQL

    1. 在ORACLE官网下载Oracle SQL Developer第三方数据库驱动 下载页面:http://www.oracle.com/technetwork/developer-tools/sq ...

  3. ENode简介与各种教学视频资源汇总（要进群这篇文章必看）

    ENode是什么 ENode是一个.NET平台开源的应用开发框架,为开发人员提供了一套完整的基于DDD+CQRS+ES+(in-memory)+EDA架构风格的解决方案. ENode的特色是什么 解决 ...

  4. 斗天斗地斗控件 -- 与 Flyout 控件的斗争史

    前言 在淘宝的收藏夹页面本地化过程中,收藏的宝贝和店铺的分类展示通过一个下拉菜单的方式进行展示.如果单独为此从头重写一个控件,那么不但费时费力,包括所有的动画方式都要全新设计,而且还容易出 bug.好 ...

  5. SSH隧道应用, 突破网络限制

    文/怡文圣美 这篇文章可以帮你解决下面三个问题: 不能直连服务器, 要先登陆跳板机, 造成客户端工具无法连接服务器. 服务器没有公网IP, 且只允许公司IP访问, 要在家里操作要先远程桌面到工作机再登 ...

  6. EasyPR--开发详解（5）颜色定位与偏斜扭转

    本篇文章介绍EasyPR里新的定位功能:颜色定位与偏斜扭正.希望这篇文档可以帮助开发者与使用者更好的理解EasyPR的设计思想. 让我们先看一下示例图片,这幅图片中的车牌通过颜色的定位法进行定位并从偏 ...

  7. ABP框架 - 数据过滤

    文档目录 本节内容: 简介 预定义过滤 ISoftDelete 何时可用? IMustHaveTenant 何时可用? IMayHaveTenant 何时可用? 禁用过滤 关于using声明 关于多租 ...

  8. C# 开发windows服务的一些心得

    最近在做一个windows服务的项目,发现并解决了一些问题,拿出来和大家分享一下,以下windows服务简称“服务” 文章会在适合时间更新,因为朋友们在不断提出新的意见或思路,感谢-.- 1.服务如何 ...

  9. Atitit 硬件 软件 的开源工作 差异对比

    Atitit 硬件 软件 的开源工作 差异对比 1.1. 模块化,标准化,以及修改的便捷性1 1.2. 生产和发布成本 1 1.3.   3. 入行门槛搞2 1.4.  在软件业极度发达的今天,任何具 ...

  10. Atitit 图像处理的心得与疑惑 attilax总结

    Atitit 图像处理的心得与疑惑 attilax总结 1.1. 使用类库好不好??还是自己实现算法1 1.2. 但是,如果遇到类库体积太大,后者没有合适的算法,那就只能自己开发算法了1 1.3. 如 ...