<!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. JQUERY操作JSON数组添加新的属性和值

    语法: var data = {}; data["Order"] =order; data["Sort"] = sort; 但是需要注意的是,如果data后面还 ...

  2. 【洛谷4884】多少个1？（BSGS）

    点此看题面 大致题意: 求满足\(个111...111(N\text{个}1)\equiv K(mod\ m)\)的最小\(N\). 题目来源 这题是洛谷某次极不良心的月赛的\(T1\),当时不会\( ...

  3. 2017.12.2 用java做一个日历

    1.先判断输入的日期是否为闰年 2.在判断输入的月份是否为2月 3.在获取输入的年份和月份的1月1日 的列数 4.在输出 import java.util.*; public class demo{ ...

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

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

  5. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  6. Eclipse 发布 JAR

    明确要生成何种类型 jar 生成工具 jar,作为包被其他程序调用 具体步骤: 选中项目文件,点右键选择 Export ,JAR File 在弹出窗口选择,导出哪些文件,并且选择好 输出 JAR 的路 ...

  7. Install Jenkins 2.1.36 and openjdk 1.7.0 on centos 7

    #!/bin/bash## Copyright (c) 2014-2015 Michael Dichirico (https://github.com/mdichirico)# This softwa ...

  8. JZOJ 1267. 路障

    1267. 路障(block.pas/c/cpp) (File IO): input:block.in output:block.out Time Limits: 1000 ms  Memory Li ...

  9. 使用cxf 发布 jax-rs 风格webservice 。并客户端测试。

    详细介绍:http://www.ibm.com/developerworks/cn/java/j-lo-jaxrs/ 1.定义一个User对象 package com.zf.test; import  ...

  10. request_resource

    1.全局变量 resource结构体定义如下,指针parent.sibling.child用于构建树状结构. struct resource { resource_size_t start; reso ...