<!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. Hybris ECP里Customer对应的数据库表

    SAP CRM里Account明细页面: SAP C4C里Account明细页面: 在Hybris storefront注册一个帐号: 注册成功之后能在backoffice里看到成功生成的custom ...

  2. Android（java）学习笔记88：BaseAdapter适配器重写之getView（）

    1. BaseAdapter适配器重写 之getView(): (1)View getview(int position, View convertview, ViewGroup parent ) 第 ...

  3. 2dsphere索引

    概念:球面地理位置索引 创建方式: db.collection.ensureIndex({w:'2dsphere'}) wdspere中,位置的表示方式不再是简单的经度,纬度,数组,而是变成一种复杂的 ...

  4. node基础

    javascript window gulp ---- 前端工程构建工具 webpack ---- 前端工程构建工具 java Python php:后台 本地电脑,服务器 node 本地或服务端运行 ...

  5. 微信公众帐号开发之一（java）

    闲来没事,就记录一下微信公众平台的开发吧~ 其实微信公众平台开发没有想象中的那么困难,因为注册了微信公众平台帐号登录之后在开发者模式里有详细的文档,个人感觉介绍还是比较详细的. 微信公众平台订阅号和服 ...

  6. Linux dmidecode命令

    1.linux系统自带的dmidecode工具查询服务器硬件信息 dmidecode 用于获取服务器的硬件信息,通常是在不打开计算机机箱的情况下使用该命令来查找硬件详细信息 这个命令可以查看内存的几乎 ...

  7. js禁止微信浏览器下拉显示黑底查看网址

    // 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var star ...

  8. 1px移动端显示问题

    设计图上的标注要有1px的线条,css本来以为直接写个1px就能万事大吉了,手机上怎么看都很粗. 至于具体为什么会这样,百度看了一圈,有点懵懵懂懂,大概就是物理分辨率高于实际网页的像素分辨率的原因吧. ...

  9. Matlab数据转化至python端,并写入数据库

    因工作原因,一些获取的行业数据以已知的结构体存储在.mat文件中, 现需要将其存储在数据库中并且能够灵活调用至python dataframe里进行操作 原数据的一个例子如下 目标如上: 然后是转化代 ...

  10. [译]The Python Tutorial#2. Using the Python Interpreter

    [译]The Python Tutorial#Using the Python Interpreter 2.1 Invoking the Interpreter Python解释器通常安装在目标机器的 ...