首页 > 代码库 > jquery做一些小的特效

jquery做一些小的特效

2024-08-30 17:37:58   220人阅读

 在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表</title>
 6         <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
 7     </head>
 8     <body>
 9     <select id="sel">
10         <!--文本框-->
11     </select>
12     <input type="text" id="shuru" />
13     <input type="button" value="http://www.mamicode.com/添加" id="btn" />
14     <input type="button" value="http://www.mamicode.com/移除" id="yichu" />
15     </body>
16     <script type="text/javascript">
17         $("#btn").click(function(){
18             var v = $("#shuru").val();
19             var str = "<option value=http://www.mamicode.com/‘"+v+"‘>"+v+"</option>";
20             $("#sel").append(str);//append追加意思
21         })
22         
23     $("#yichu").click(function(){
24         var v = $("#shuru").val(); 
25         
26         $("[value=http://www.mamicode.com/‘"+v+"‘]").remove(); //移除
27     })    
28     </script>
29 </html>
开关灯效果，遮罩层
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表</title>
 6         <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
 7         <style type="text/css">
 8     #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50); 
 9     -moz-opacity:0.5; 
10     -khtml-opacity: 0.5; 
11     opacity: 0.5;}
12     </style>
13     
14     </head>
15     <body>
16     <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
17     <input type="button" value="http://www.mamicode.com/关灯" id="guan" />
18     <input type="button" value="http://www.mamicode.com/开灯" id="kai" />
19     </div>
20     </body>
21     
22     <script type="text/javascript">
23     $("#guan").click(function(){
24         var str = "<div id=‘zz‘></div>";
25         $("body").append(str);
26         $(this).css("display","none");
27         $("#kai").css("display","block");
28     })
29     $("#kai").click(function(){
30         $("#zz").remove();
31         $("#guan").css("display","block");
32         $(this).css("display","none");
33     })
34 
35     </script>
36 </html>
技术分享技术分享

 

 





 
jquery做一些小的特效






























        

            
                
                  
                
                

                    联系

                    我们