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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
如何在vue 中引入使用jquery
Nov 10 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
js获取页面description的方法
2015/05/21 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
node上的redis调用优化示例详解
2018/10/30 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python中获取网页状态码的两个方法
2014/11/03 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
高中生职业生涯规划书
2014/02/24 职场文书
优秀大学生自荐信
2014/06/09 职场文书
物业管理专业求职信
2014/06/11 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
大学学生个人总结
2015/02/15 职场文书
爱的教育读书笔记
2015/06/26 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
python的变量和简单数字类型详解
2021/09/15 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript