jquery标题选择动画
程序员文章站
2022-03-28 18:34:51
...
jquery标题选择动画,福利带源码,对jquery感兴趣的可以研究研究,对jquery有不一样认识哦~~
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP中文网</title> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <style> /*container容器只是为了水平居中,如不需要可以去掉这层嵌套*/ .container{ left: 50%; margin-top: 100px; float: left; cursor:pointer; position: relative; } .BG{ right: 50%; font-size: 0; background-color: #f2f2f2; border-radius: 30px; position: relative; } .container div{ font-size: 16px; line-height: 60px; } .list{ float: left; display: inline-block; padding: 0 50px; transition: color 0.5s; position: relative; z-index: 1; } /*这里的listH和listA顺序不能换,有优先级,当listA被使用时listH不起作用*/ .listH{ color: #ff8300; } .listA{ color: #fff; } /*滑块*/ #active{ width: 100px; height: 60px; border-radius: 30px; background-color: #ff8300; box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58); position: relative; z-index: 0; transition: left 0.5s,width 1s; } </style> <script> $(document).ready(function () { /*设置默认激活的选项卡eq(i)*/ var aL = $(".list:eq(1)"); $("#active").width(aL.innerWidth()); $("#active").offset(aL.offset()); aL.addClass("listA"); /*为每个按钮添加点击事件*/ $(".list").click(function() { $("#active").width($(this).innerWidth()); //设置宽度 $("#active").offset($(this).offset()); //设置位置 $(this).addClass("listA"); $(".list").not(this).removeClass("listA"); }); /*hover效果*/ $(".list").hover(function () { $(this).addClass("listH") },function () { $(this).removeClass("listH") }) }); </script> </head> <body> <div> <div> <div>PHP中文网首页</div> <div>PHP中文网视频教程</div> <div>PHP中文网社区</div> <div>PHP中文网技术文章</div> <div>PHP中文网工具下载</div> <div id="active"></div> </div> </div> </body> </html>
以上是jquery标题选择动画的源码,有兴趣的可以拿去,更多技术文章、源码请到PHP中文网搜索
相关推荐:
以上就是jquery标题选择动画的详细内容,更多请关注其它相关文章!
推荐阅读
-
纯JAVASCRIPT图表动画插件Highcharts Examples_jquery
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
Jquery创建层显示标题和内容且随鼠标移动而移动_jquery
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载_jquery
-
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery
-
jQuery怎么使用?jQuery选择器有哪些?
-
jQuery选择器符号分析
-
关于jQuery参考实例2.0 用jQuery选择元素_基础知识
-
jquery在ie7下选择器的问题导致append失效的解决方法_jquery
-
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)_jquery