Jquery鼠标悬停按钮图标动态变化效果
<!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鼠标悬停按钮图标动态变化效果的更多相关文章
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- jQuery鼠标悬停3d菜单展开动画
效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- JQuery鼠标移到小图显示大图效果的方法
JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- Web前端鼠标悬停实现显示与隐藏效果
css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页标签在运行时显示的位置 css提供Position ...
随机推荐
- CUDA并行存储模型
CUDA将CPU作为主机(Host),GPU作为设备(Device).一个系统中可以有一个主机和多个设备.CPU负责逻辑性强的事务处理和串行计算,GPU专注于执行高度线程化的并行处理任务.它们拥有相互 ...
- 后台调用前台js
WEB后台代码调用前台JS(两种方式). 1 这种方式只能调用简单的JS代码.不能调用自定义的函数. string jss = "<script language='javascr ...
- JQuery根据关键字检索html元素并筛选显示
背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索html元素,筛选后显示在界面上. Html元素如下: <div> <input type="text&q ...
- UITableView 优化总结
最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化UITableView的.加上正好最近也在优化项目中的类似朋友圈功能这块,思考了很多关于UITableView的优 ...
- pthread_cancel函数注意事项
/************************************************** 相关函数: #include <pthread.h> int pthread_can ...
- (78)zabbix值缓存(value cache)说明
在zabbix-2.2版本之前,zabbix计算trigger与calculated/aggregate值都是直接通过sql语句查询并处理出来的结果,为了提高这块的性能与效率,zabbix引入了val ...
- 第六篇:python中numpy.zeros(np.zeros)的使用方法
用法:zeros(shape, dtype=float, order='C') 返回:返回来一个给定形状和类型的用0填充的数组: 参数:shape:形状 dtype:数据类型,可选参数,默认numpy ...
- 【Python学习之十】yield之send方法
yield作用 简单地讲,yield 的作用就是把一个函数变成一个 generator,带有 yield 的函数不再是一个普通函数,Python 解释器会将其视为一个 generator.下面以斐波拉 ...
- 安全 - 堡垒机 - Jumpserver
GitHub - jumpserver/Dockerfile: Jumpserver all in one Dockerfile https://github.com/jumpserver/Docke ...
- PHP面向对象编程(1)基础
一.面向对象OOP(Oriented Object Programming) 面向过程的编程 将要实现的功能描述为一个从一开始到结束的连续的“步骤(过程)”. 一次逐步完成这些步骤.如果步骤比较大,又 ...