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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python实现飞机大战项目
2020/03/11 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
优秀干部获奖感言
2014/01/31 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
出生公证书样本
2014/04/04 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
中药学自荐信
2014/06/15 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP