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

转载  更新时间:2018年02月13日 12:36:54   作者:lexie   我要评论

这篇文章主要介绍了jQuery实现鼠标响应式淘宝动画效果,涉及jQuery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下

本文实例讲述了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扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

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

相关文章

  • jquery picswitch图片焦点图展示效果

    jquery picswitch图片焦点图展示效果

    jquery pictureswitch制作图片展示效果实现代码,对于想用jquery实现焦点图效果的朋友可以参考下。
    2010-05-05
  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    当大家进行复杂功能设计的时候,在对多级联选择进行设计,为了获得更好的用户体验和节省页面空间,往往会使用弹出层的方法。
    2010-11-11
  • jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式,需要的朋友一起看看吧
    2016-06-06
  • jquery插件制作 手风琴Panel效果实现

    jquery插件制作 手风琴Panel效果实现

    我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样
    2012-08-08
  • 基于jQuery的select下拉框选择触发事件实例分析

    基于jQuery的select下拉框选择触发事件实例分析

    这篇文章主要介绍了基于jQuery的select下拉框选择触发事件实现方法,结合实例形式分析了常用浏览器对select触发事件的兼容及实现触发的相关技巧,需要的朋友可以参考下
    2016-11-11
  • jquery进行数组遍历如何跳出当前的each循环

    jquery进行数组遍历如何跳出当前的each循环

    通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环,解决方法如下,需要的朋友可以参考下
    2014-06-06
  • jQuery ajax serialize()方法的使用以及常见问题解决

    jQuery ajax serialize()方法的使用以及常见问题解决

    使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作接下来介绍jQuery ajax - serialize() 方法定义和用法,感兴趣的朋友可以了解下啊,希望本文对你有所帮助
    2013-01-01
  • 基于jquery的15款幻灯片插件

    基于jquery的15款幻灯片插件

    幻灯片效果通常用于展示相册图片或特色推荐内容。一个漂亮的幻灯片更能吸引访客的注意力。本文里面,收集了15款jquery幻灯片插件,让你的图片展示更漂亮,让你的特色内容更吸引人。
    2011-04-04
  • jQuery中get方法用法分析

    jQuery中get方法用法分析

    这篇文章主要介绍了jQuery中get方法用法,结合实例形式分析了jQuery的ajax交互中get方法的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • jQuery+ajax简单实现文件上传的方法

    jQuery+ajax简单实现文件上传的方法

    这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下
    2016-06-06

最新评论