当前位置:   article > 正文

jquery实战训练_jq 锻炼

jq 锻炼

JQuery实战训练,1.5秒返回页面,2.鼠标滑过显示内容,3.轮展图,4.返回顶部,5.右击显示菜单,6.内容编辑,7.购物车结算,8.百度换肤


个人主页:http://www.itit123.cn/ 更多干货等你来拿


1.倒计时,几秒后跳回首页




2.鼠标划过显示隐藏内容

为了突出效果,页面不多加修饰。可以用在显示隐藏的二级菜单,二维码,等等。脑洞有多大,作用就有多大
第一步:将图片隐藏dispaly:none;
第二步:添加一个show的样式,里面的内容是display:block;
第三步:jquery的内容,找到鼠标划过的标签添加mouseover的函数 把需要显示的内容添加addClass("show");然后回调函数,mouseout的函数,removeClass("show");方法有很多。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!--声明当前页面的编码集:charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
  5. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  6. <title>鼠标划过显示隐藏内容</title>
  7. <meta name="Keywords" content="关键词,关键词">
  8. <meta name="Description" content="">
  9. <!--css,js-->
  10. <style type="text/css">
  11. *{margin:0;padding:0;}
  12. div{width:200px;height:200px;}
  13. .box1{background:#066;cursor:pointer;}
  14. .box2{background:#0cf;display:none;}
  15. .show{display:block;}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="box1" title="鼠标划过此处下面的图片会显示"></div>
  20. <div class="box2"></div>
  21. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  22. <script type="text/javascript">
  23. $(function(){
  24. $(".box1").mouseover(function(){
  25. $(".box2").addClass("show");
  26. }).mouseout(function(){
  27. $(".box2").removeClass("show");
  28. });
  29. });
  30. </script>
  31. </body>
  32. </html>
  1. <span style="white-space:pre"> </span>$(function(){
  2. // 左侧菜单栏切换 项目代码
  3. $(".menu").find("li").mouseover(function(){
  4. $(this).find(".show_menu").addClass("show");
  5. }).mouseout(function(){
  6. $(this).find(".show_menu").removeClass("show");
  7. });
  8. // 显示二维码
  9. $(".sys_qq").mouseover(function(){
  10. $(this).find(".code").fadeTo("slow",1);
  11. }).mouseout(function(){
  12. $(this).find(".code").hide();
  13. });
  14. });

3.轮展图切换-插件版


效果图:


5.返回顶部

效果图:


6.右击显示菜单

效果图:


效果图:


8.购物车结算


效果图:


9.百度换肤


效果图:



还在更新中。。。。

一点点进步,一点点成长,如果有问题和建议可以留言,我会及时更正微笑





声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/813094
推荐阅读
相关标签
  

闽ICP备14008679号