<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery仿淘宝icon动画图标特效</title>

</head>

<style type="text/css">

*{padding: 0;margin: 0;}

#move{ margin: 40px auto; width: 298px; height: 174px; border: 1px solid #ccc; background-color: #F0F0F0;}

#move a{

        display: inline-block;

        width: 58px;

        height: 25px;

        border: 1px solid #ddd;

        border-radius: 3px;

        background-color: #fff;

        text-align: center;

        margin: 10px 17px;

        position: relative;

        padding-top: 40px;

        color: #9c9c9c;

        font-size: 12px;

        text-decoration: none;

        line-height: 25px;

        overflow: hidden;

}

#move a i{

    position: absolute;

    top: 12px;

    left: 0;

    display: inline-block;

    width: 100%;

    text-align: center;

    filter:alpha(opacity=100);

    opacity: 1;

}

#move a:hover{

    color: #f00;

}

#move img{

    border:none;

    width: 50%;

}

</style>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function(){

        $('#move a').mouseenter(function(){

            $(this).find("i").animate({top:'-25px',opacity:'0'},300,function(){

                $(this).css({top:'25px'});

                $(this).animate({top:'12px',opacity:'1'},600)

            });

        })

    })

</script>

<body>

<div id="move">

    <a href="#"><i><img src="data:images/zhu.png"></i><p>租房</p></a>

    <a href="#"><i><img src="data:images/zhu2.png"></i><p>租房</p></a>

    <a href="#"><i><img src="data:images/zhu3.png"></i><p>租房</p></a>

    <a href="#"><i><img src="data:images/zhu4.png"></i><p>租房</p></a>

    <a href="#"><i><img src="data:images/zhu.png"></i><p>租房</p></a>

    <a href="#"><i><img src="data:images/zhu2.png"></i><p>租房</p></a>

</div>

</body>

</html>

Jquery鼠标悬停按钮图标动态变化效果的更多相关文章

  1. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  4. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  5. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  6. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...

  8. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  9. Web前端鼠标悬停实现显示与隐藏效果

    css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...

随机推荐

  1. Liunx开发（Extjs4.1+desktop+SSH2超强视频教程实践）（2）

    然后装eclipse: 为啥默认是搜狗导航: java还没装呢: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downlo ...

  2. 黑箱中的 retain 和 release

    https://github.com/Draveness/Analyze/blob/master/contents/objc/黑箱中的%20retain%20和%20release.md 写在前面 在 ...

  3. 在ListBox控件间交换数据

    实现效果: 知识运用: ListBox控件的SelectedItem属性 //获取或设置ListBox控件中当前选定的数据项 public Object SelectedItem{ get;set; ...

  4. 快速排序算法思路分析和C++源代码(递归和非递归)

    快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试喜欢考这个. 快速排序是C.R.A.Hoar ...

  5. Bootstrap HTML编码规范

    语法 1.用两个空格来代替制表符(Tab)--这是唯一能保证在所有的环境下获得一致展现的方法. 2.嵌套元素应当缩进一次(即两个空格). 3.对于属性的定义,属性值确保全部都用双引(避免使用单引号). ...

  6. 两种简单的servlet实现反向代理

    以下两种方法都需要引入jar包: <dependency> <groupId>org.mitre.dsmiley.httpproxy</groupId> <a ...

  7. sql 参数化查询

      在初次接触sql时,笔者使用的是通过字符串拼接的方法来进行sql查询,但这种方法有很多弊端 其中最为明显的便是导致了sql注入. 通过特殊字符的书写,可以使得原本正常的语句在sql数据库里可编译, ...

  8. javascript的基本类型和引用类型

    一.基本类型和引用类型 基本的数据类型有5个:undefined,boolean,number,string,null ? 1 2 3 4 5 typeof null; //"object& ...

  9. [Wolfgang Mauerer] 深入linux 内核架构 第二章 进程管理与调度【未完】

     作为Linux开发爱好者,从事linux 开发有三年多时间.做过bsp移植,熟悉u-boot代码执行流程:看过几遍<linux 设备驱动程序开发>,分析过kernel启动流程,写过驱动, ...

  10. Linux ps与top命令

    Linux ps与top命令 这两个命令都是查看系统进程信息的命令,但是用处有点儿不同 1.ps命令--提供系统过去信息的一次性快照 也就是说ps命令能够查看刚刚系统的进程信息  命令:ps aux或 ...