Jquery鼠标悬停按钮图标动态变化效果
2017-07-06 00:40
543 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝icon动画图标特效</title> </head> <style type="text/css"> *{padding: 0;margin: 0;} #move{ margin: 40px auto; width: 298px; height: 174px; border: 1px solid #ccc; background-color: #F0F0F0;} #move a{ display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; position: relative; padding-top: 40px; color: #9c9c9c; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; } #move a i{ position: absolute; top: 12px; left: 0; display: inline-block; width: 100%; text-align: center; filter:alpha(opacity=100); opacity: 1; } #move a:hover{ color: #f00; } #move img{ border:none; width: 50%; } </style> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#move a').mouseenter(function(){ $(this).find("i").animate({top:'-25px',opacity:'0'},300,function(){ $(this).css({top:'25px'}); $(this).animate({top:'12px',opacity:'1'},600) }); }) }) </script> <body> <div id="move"> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu3.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu4.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> </div> </body> </html>
相关文章推荐
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- JQUERY实现鼠标悬停在图片上模拟放大镜效果
- jQuery 仿淘宝 鼠标悬停显示大图效果
- jQuery九宫格鼠标悬停动画效果
- jQuery鼠标悬停图片分享按钮动画
- [封装插件]Jquery中的CSS处理一览以及回到顶部按钮和鼠标悬停获取坐标的案例
- jQuery实现仿微软首页感应鼠标变化滑动窗口效果
- jQuery实现鼠标滚轮动态改变样式或效果
- jquery实现鼠标滑过后动态图片提示效果实例
- Jquery中的事件处理(自动触发事件,禁用按钮,悬停,失焦,滑动效果)
- jquery鼠标悬停时的放大图片的图片提示效果
- jquery实现鼠标滑过后动态图片提示效果实例
- 利用JQuery给div按钮加上统一的动态效果
- jquery制作图标导航插件鼠标悬停放大显示特效代码
- jQuery实现鼠标悬停3d菜单展开动画效果
- -jQuery图片九宫格样式鼠标悬停图片滑动切换效果
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- 鼠标划过的动态效果,JQUERY:display:none