<!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. Atom打造轻量化C/C++ IDE

    写在前面 近期沉迷Atom的颜值无法自拔,在github的光环下,Atom凭借自身良好的素质,获得了大量开发者的青睐.随之而来的就是丰富的插件库,在插件帮助下,它对各种编程语言都有相当好的支持.对与一 ...

  2. 【HDU1542】Atlantis （扫描线的经典运用）

    点此看题面 大致题意: 给你\(N\)个矩形,请你求出它们覆盖的面积(重叠的面积只算一次). 扫描线 这道题是一道典型的求矩形面积并问题,是扫描线的一个经典运用.这里就不赘述了. 代码 #includ ...

  3. IDEA搭建Maven 的聚合项目

    今天突然想把自己学习在eclipse上的maven聚合项目搭建到IDEA上,结果IDEA有太多的配置步骤,导致失败了很多次,终于在网上找到了一篇博客 https://blog.csdn.net/for ...

  4. python换行

    python中如果一行代码太长,看着不方便时,怎么办? 只需要在需要换行的地方添加上符号 \ 就行了.

  5. http 调用错误处理

    1. http code 在使用Nginx时,经常会碰到502 Bad Gateway和504 Gateway Time-out错误,下面以Nginx+PHP-FPM来分析下这两种常见错误的原因和解决 ...

  6. 梁勇Java语言程序设计第三章全部例题 为第五次作业

    完成例题3-1,通过系统当前时间毫秒值获取随机10以内的整数判断加的结果是否正确,不用if语句 package com.swift; import java.util.Scanner; public ...

  7. 已解决: mybatis报错 org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxx' in 'class java.lang.String'

    最近在练习MyBatis时 进行姓名的模糊查询时候出现 org.apache.ibatis.exceptions.PersistenceException: ### Error querying da ...

  8. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SpringBoot显式事务

    参考:https://www.jianshu.com/p/f5fc14bde8a0 后续测试代码的完整项目:https://files.cnblogs.com/files/hellohello/dem ...

  10. thinkphp 3.2.3 - Dispatcher.class.php 解析（转发器）

    class Dispatcher { public static function dispatch() { $varPath = C('VAR_PATHINFO'); // 's' $varAddo ...