本效果使用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. jmeter之线程组的使用

    线程组 在使用jmeter性能测试时,我们都得先添加个线程组,右键testplan-->添加-->Threads-->线程组.在线程组下执行. 问题:为了能够让jmeter在做性能测 ...

  2. 【C#】获取网页内容及HTML解析器HtmlAgilityPack的使用

    最近经常需要下载一些东西,而这个下载地址又会经过层层跳转,每个页面上都有很多广告,烦不胜烦,所以做了一个一键获得最终下载地址的小工具.使用C#,来获取网页内容,然后通过HtmlAgilityPack获 ...

  3. Windows 7 上安装Visual Studio 2015 失败解决方案

    安装之前先要看看自己的系统支不支持,具体的可以看:https://www.visualstudio.com/en-us/visual-studio-2015-system-requirements-v ...

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

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

  5. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. Java-jdbc操作数据库

    如果需要访问数据库,首先要加载数据库驱动,数据库驱动只需在第一次访问数据库时加载一次.然后在每次访问数据库时创建一个Connection实例,获取数据连接,这样就可以执行操作数据库的SQL语句.最后在 ...

  7. C/S架构应用程序开发培训笔记

    最近为客户组织了一项C/S架构程序的开发培训,讲解C/S应用程序开发中需要注意的点. 我主要是做C/S方面的ERP/CRM程序开发,界面是用Windows Forms技术,有遗漏或错误的地方欢迎批评指 ...

  8. 【WCF】终结点的监听地址

    终结点主要作用是向客户端公开一些信息入口,通过这个入口,可以找到要调用的服务操作.通常,终结点会使用三个要素来表述,我记得老蒋(网名:Artech,在园子里可以找到他)在他有关WCF的书里,把这三要素 ...

  9. ubuntu 14.04LTS 环境下配置NFS服务

    简言之,NFS(Network FileSystem,网络文件系统)用于在不同机器,不同操作系统之间通过网络互相分享各自的文件.NFS设计之初就是为了在不同的系统间使用,所以它的通讯协议设计与主机及操 ...

  10. c 高级函数的简单用法

    c 中内置了很多高级的函数,我们先使用排序函数看一下 #include <stdio.h> #include <stdlib.h> #include <string.h& ...