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温习篇 强大的JQuery选择器

    jQuery温习篇 强大的JQuery选择器

    学习jQuery已经有1年多的时间了,但是一直由于做WinForm程序开发没有经常实践。现在又开始重拾WebForm开发。写几篇jQuery系列,温习下jQuery框架的知识。
    2010-04-04
  • jQuery弹出框代码封装DialogHelper

    jQuery弹出框代码封装DialogHelper

    这篇文章主要介绍了jQuery弹出框代码封装DialogHelper的方法,需要的朋友可以参考下
    2015-01-01
  • JQuery中使用on方法绑定hover事件实例

    JQuery中使用on方法绑定hover事件实例

    这篇文章主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下
    2014-12-12
  • jQuery照片伸缩效果不影响其他元素的布局

    jQuery照片伸缩效果不影响其他元素的布局

    jQuery照片伸缩效果,不是单纯的图片放大缩小,不影响其他元素的布局,需要的朋友可以参考下
    2014-05-05
  • 超棒的响应式布局jQuery插件Freetile.js

    超棒的响应式布局jQuery插件Freetile.js

    随着页面扁平化的普及,越来越多的网站都开始使用响应式布局,作为一个优秀的前端工作者,必须要精通的,这里给大家推荐一款响应式布局的jQuery插件。
    2014-11-11
  • jquery拖拽排序简单实现方法(效果增强版)

    jquery拖拽排序简单实现方法(效果增强版)

    这篇文章主要介绍了jquery拖拽排序简单实现方法,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery中dom元素上绑定的事件详解

    jQuery中dom元素上绑定的事件详解

    在jquery中绑定事件我们可以使用click、change、mouseout、.bind(),live等待事件来操作,下面我来给大家介绍jQuery使用向DOM元素绑定事件实现程序相关实例,有需要了解的同不可进入参考。
    2015-04-04
  • jquery滚动条插件jScrollPane的使用介绍

    jquery滚动条插件jScrollPane的使用介绍

    jScrollPane想必大家都不陌生吧它就是所谓的jquery滚动条插件,下面为大家介绍下其具体的使用,感兴趣的朋友不要错过
    2013-11-11
  • EasyUI 中 MenuButton 的使用方法

    EasyUI 中 MenuButton 的使用方法

    在EasyUI 的Demo 中 只有MenuButton 的显示DEMO,没有click 事件的相关操作,项目中正好用到啦,所以研究了下,可以用js 动态的为menu item 绑定click 事件
    2012-07-07
  • 基于jquery实现在线选座订座之影院篇

    基于jquery实现在线选座订座之影院篇

    通过电商购买过电影票的朋友都很熟悉此功能,那么在线选座订座使用程序怎么实现的呢,接下来,给大家分享基于jquery实现在线选座订座之影院篇,感兴趣的朋友快来围观
    2015-08-08

最新评论