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

2018-02-17 19:15:00来源:作者:人点击

分享

本文实例讲述了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的direction图片渐变动画效果
  • jQuery实现的背景颜色渐变动画效果示例
  • jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
  • jQuery实现的鼠标响应缓冲动画效果示例
  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果
  • 一款基jquery超炫的动画导航菜单可响应单击事件
  • jQuery动画animate方法使用介绍
  • JQuery动画animate的stop方法使用详解
  • jQuery动画效果animate和scrollTop结合使用实例
  • 分享8款优秀的 jQuery 加载动画和进度条插件
  • jQuery实现鼠标响应式透明度渐变动画效果示例

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台