jQuery实现鼠标响应式淘宝动画效果示例


Posted in jQuery onFebruary 13, 2018

本文实例讲述了jQuery实现鼠标响应式淘宝动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Jquery淘宝动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
 margin: 0;
 padding: 0;
 font-family:"微软雅黑"
}
#box{
 padding-left:20px;
 background-color:#f9f9f9;
 border:1px solid #ccc;
 width:236px;
 height:250px;
 margin:0 auto;
}
#box a{
 width:50px;
 height:60px;
 border:1px solid #ccc;
 float:left;
 margin:10px 10px;
 background-color:#FFFFFF;
 text-align:center;
 font-size:14px;
 position:relative;
}
#box a i{
 position:absolute;
 top:15px;
 left:18px;
}
#box a p{
 position:absolute;
 top:36px;
 left:5px;
}
#box a{
 cursor:pointer;
}
</style>
</head>
<body>
<div id="box">
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
</div>
<script>
$(function(){
  $("#box a").mouseenter(function(){
    $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){
      $(this).css({top:"25px"});
      $(this).animate({top:"15px",opacity:"1"},200)
    })
  })
});
</script>
</body>
</html>

该动画可实现鼠标滑过时渐变向上飞出的视觉效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php的hash算法介绍
2014/02/13 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javascript multibox 全选
2009/03/22 Javascript
JS input 数字验证代码
2009/07/30 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
Vue中props的使用详解
2018/06/15 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
python使用turtle库绘制时钟
2020/03/25 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python列表解析操作实例总结
2020/02/26 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
公司试用期员工自我评价
2014/09/17 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
个人创业事迹材料
2014/12/30 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
家长会开场白和结束语
2015/05/29 职场文书