<!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. 【洛谷1580】yyy loves Easter_Egg I（字符串处理题）

    点此看题面 大致题意: 略.(一道模拟题,自己去看题面吧) 几个字符数组函数 纯粹是一道字符串处理题,就当是学了一下各种与字符数组相关的函数吧! \(gets()\):这个是比较常用的函数,就是读入一 ...

  2. Java后台调用gcc编译C语言代码

    想做一个能够在线编译代码运行的平台,Java和SQL已经支持了,因为是用Java写的后台,所以Java和SQL挺容易就实现了,做到支持C的时候就卡住了,网上搜了一下这种帖子好像很少. 我采取的办法是就 ...

  3. 20.JSON

    JSON是javascript的一个子集,利用js中的一些儿模式来表示结构化数据.不是只有javascript才使用JSON,JSON是一种数据格式,很多编程语言都有针对JSON的解析器和序列化器. ...

  4. 最近面试前端岗位，汇总了一下前端面试题（JS+CSS）

    JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该 任务才会进入主线 ...

  5. tensorfow install error

    http://stackoverflow.com/questions/33655731/error-while-importing-tensorflow-in-python2-7-in-ubuntu- ...

  6. SQL数据库查询出一张表中重复的数据，按某个字段来查找。

    例如表名为Course 需要查询出name重复的有那些??? 解答如下: 补充: 如:查询每个姓名出现大于2次,SQL如下 SELECT COUNT(NAME) as '出现次数',  NAME FR ...

  7. 解决Mycat对自增表不支持(第一种已测试通过)

    表 INSERT INTO news_class (`class_id`,`class_name`) VALUES (next VALUE FOR MYCATSEQ_GLOBAL,'1'); sequ ...

  8. 微信小程序的开发——01小程序的执行流程是怎样的？

    作者:叶小钗 转载至:https://www.cnblogs.com/yexiaochai/p/9346043.html 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是 ...

  9. mysql 索引的统计

    查看一个库里面没有使用过的索引select object_type,object_schema,object_name,index_name,count_star,count_read,COUNT_F ...

  10. 大数据的存储——HBase、HIVE、MYSQL数据库学习笔记

    HBase 1.hbase为查询而生,它通过组织机器的内存,提供一个超大的内存hash表,它需要组织自己的数据结构,表在hbase中是物理表,而不是逻辑表,搜索引擎用它来存储索引,以满足实时查询的需求 ...