本效果使用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. 换个角度看微信小程序[推荐]

    去年参加几次技术沙龙时,我注意到一个有意思的现象:与之前大家统一接受的换名片不同,有些人并不愿意被添加微信好友--"不好意思,不熟的人不加微信". 这个现象之所以有意思,是因为名片 ...

  2. App开发的新趋势

    移动开发这些年,移动开发者人数越来越多,类似的培训公司发展也很快,不过伴随着的是移动应用的需求这几年发展更为旺盛.要开发好的App,纯原生开发肯定是最佳选择.但是这么多年发展,原生开发的难度并没有降低 ...

  3. Go语言实战 - revel框架教程之CSRF（跨站请求伪造）保护

    CSRF是什么?请看这篇博文“浅谈CSRF攻击方式”,说的非常清楚. 现在做网站敢不防CSRF的我猜只有两种情况,一是没什么人访问,二是局域网应用.山坡网之前属于第一种情况,哈哈,所以至今没什么问题. ...

  4. 最大子段和（c++）

    // 最大子段和.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using namesp ...

  5. Atitit HTTP 认证机制基本验证 (Basic Authentication) 和摘要验证 (Digest Authentication)attilax总结

    Atitit HTTP认证机制基本验证 (Basic Authentication) 和摘要验证 (Digest Authentication)attilax总结 1.1. 最广泛使用的是基本验证 ( ...

  6. npm常用命令

    npm常用命令 环境:win7 npm 是什么 NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜 ...

  7. salesforce 零基础学习（五十九）apex:param使用以及相关的疑惑

    做web项目难免要从一个页面传参数,解析参数中的值进行相关处理以后跳转到其他页面,VF中也不例外.使用传参的标签为apex:param. apex:param标签不可以单独使用,需要作为子标签嵌套在相 ...

  8. 设计模式之接口隔离原则（ISP）

    一.定义: ISP:Interface Segregation Principle 接口隔离原则表明客户端不应该被强迫实现一些他们不会使用的接口,应该把胖接口中的方法分组,然后用多个接口代替它,每个接 ...

  9. TSQL 分组集（Grouping Sets）

    分组集(Grouping Sets)是多个分组的并集,用于在一个查询中,按照不同的分组列对集合进行聚合运算,等价于对单个分组使用“union all”,计算多个结果集的并集.使用分组集的聚合查询,返回 ...

  10. PHP 高级编程(5/5) - SPL 数组重载

    ArrayAccess接口 ArrayAccess接口是对象的行为看起来像个数组,定义了四个方法.接口概要如下: ArrayAccess { /* Methods */ abstract public ...