首页 > 代码库 > 前端常用到的JS特效（持续更新......）

前端常用到的JS特效（持续更新......）

2024-10-15 07:18:01   219人阅读

这里默认使用jquery

1.菜单栏中鼠标滑过某菜单出现子菜单

　　子菜单默认隐藏，鼠标滑过菜单栏，出现子菜单栏，代码如下：

 1 <!--
 2 Author: XiaoWen
 3 Create a file: 2017-02-27 11:24:01
 4 Last modified: 2017-02-27 17:16:06
 5 Start to work:
 6 Finish the work:
 7 Other information:
 8 -->
 9 <!DOCTYPE html>
10 <html lang="en">
11 <head>
12   <meta charset="UTF-8">
13   <title>Document</title>
14   <style>
15     *{margin: 0;padding: 0;
16     }
17     #nav{background: #eee;width: 600px; height: 40px;margin: 0 auto;
18     }
19     ul{
20       list-style:none;
21     }
22     ul li{
23       float: left;
24       line-height: 40px;
25       text-align: center;
26       position: relative;
27     }
28     a{
29       text-decoration: none;
30       color: #000;
31       display: block;
32       padding: 0 10px;
33       height: 40px;
34     }
35     a:hover{
36       color: #fff;
37       background: #666;
38     }
39     ul li ul li{
40       float: none;
41       background: #eee;
42       margin-top: 2px;
43     }
44     ul li ul{
45       position: absolute;
46       left: 0;
47       top: 40px;
48     }
49     ul li ul li a{
50       width: 80px;
51     }
52     ul li ul li a:hover{
53       background: #06f;
54     }
55     ul li ul{
56        display: none;
57     }
58     ul li:hover ul{
59       /* display: block; */
60     }
61   </style>
62 </head>
63 <body>
64 <div id="nav">
65   <ul>
66     <li><a href="#">一级菜单1</a></li>
67     <li><a href="#">一级菜单2</a></li>
68     <li>
69       <a href="#">一级菜单3</a>
70       <ul>
71         <li><a href="#">二级菜单1</a></li>
72         <li><a href="#">二级菜单2</a></li>
73         <li><a href="#">二级菜单3</a></li>
74       </ul>
75     </li>
76     <li><a href="#">一级菜单4</a></li>
77     <li><a href="#">一级菜单5</a></li>
78     <li><a href="#">一级菜单6</a></li>
79   </ul>
80 </div>
81 <script src="http://code.jquery.com/jquery.js"></script>
82 <script>
83 // $ 等于 jQuery
84 // $(function(){}) 等于 $(document).ready(function(){})
85 // 表示整个文档加载完成后再执行相应的函数。
86   $(function(){
87     // 选择器 > 表示子元素
88     $(‘#nav>ul>li‘).mouseover(function(){
89       // children 只获取子元素，不获取孙元素
90       $(this).children(‘ul‘).show()
91     })
92     $(‘#nav>ul>li‘).mouseout(function(){
93       $(this).children(‘ul‘).hide()
94     })
95   })
96 </script>
97 </body>
98 </html>

这里主要使用两个事件mouseover鼠标滑过和mouseout鼠标离开。并添加对应的方法。

技术分享

　　　　　　　　　　　　　　　　图1

图1为效果图

 

2.返回顶部按钮

　　在页面右下方添加一个返回顶部按钮，当页面滑到一定位置时，按钮出现，否则消失，默认隐藏

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>返回顶部</title>
 6     <style type="text/css">
 7     .content{ width: 100%;height: 500px; background:green; overflow: hidden; }
 8     #back-to-top{ position: fixed; right: 50px;bottom: 10%;  width: 44px;height: 44px; text-align: center; display: none; cursor: pointer;}
 9     #back-to-top a:hover{ color: #fff; }
10 </style>
11 <script src="js/jquery-1.7.2.min.js"></script>
12 </head>
13 <body>
14 <div class="content"></div>
15 <div class="content"></div>
16 <div class="content"></div>
17 <div id="back-to-top"><a href="#" title="返回顶部"><img src="images/top.png" width="44" height="44"></a></div>
18 <script>
19 $(function(){
20     $(‘#back-to-top‘).hide();
21     $(function(){
22         $(window).scroll(function(){
23             if($(window).scrollTop()>100){
24                 $(‘#back-to-top‘).fadeIn(100);
25             }else{
26                 $(‘#back-to-top‘).fadeOut(100);
27             }
28         });
29         $(‘#back-to-top‘).click(function(){
30             $(‘body,html‘).animate({scrollTop:0},300)
31             return false;
32         })
33     })
34 })
35 </script>
36 </body>
37 </html>

.fadeIn() 设置图标淡出延迟，  .fadeOut()设置图标淡入（隐藏）延迟。这里要注意两者不要弄反了，初学者往往容易因为out和in的字面意思，弄反该方法的意思。

在给该图标添加一个click事件。

前端常用到的JS特效（持续更新......）


联系
我们