网页项目里的收获

男娘i 2021-12-13 15:09 227阅读 0赞

1.CSS3中的3D转换

2.CSS3中的文本效果，

## ::before 和 ::after 两个伪元素中添加阴影效果 ##

出现如图效果：

![1249942-20171109113517497-318252269.png][]

3.出现如下图的效果,点哪个框,那个框的背景色会变成白色,字体颜色变红,同时,最上方会有一个红色的线.

![1249942-20171112093122263-1485107244.png][]

<body>
    
        <div id="new">
                                	<div class="new-lan" style="background-color:#999;
    								color:#666;" οnclick="	Dian('0')" >New
                                    </div>
                                    	<div class="new-lan" οnclick="Dian('1')"  style="background-color:#999;
    								color:#666;">书讯</div>
                                    
                                    <div class="new-lan" οnclick="Dian('2')"  style="background-color:#999;color:#666;" >少儿
                                    </div>
                                    <div class="new-lan" οnclick="Dian('3')"  style="background-color:#999;color:#666;">小说</div>
                                    <div class="new-lan"  οnclick="Dian('4')"style="background-color:#999;color:#666;">财经</div>
                                    <div class="new-lan" οnclick="Dian('5')"  style="background-color:#999;color:#666;">活动</div>
                                </div> 
    
        </body>
    
    
            <script type = "text-javascript">
    
             function Dian(a)
    	{ 
    		var x = document.getElementsByClassName("new-mu");
    		for( var i=0;i< x.length;i++)
    		{ 
    			x[i].style.display = "none";
    		}
    			x[a].style.display = "block";
    		
    		var y = document.getElementsByClassName("new-lan")  /*为了改变背景色,字体颜色,添加上边的框的颜色*/
    			for( var j=0;j<y.length;j++)
    			{ 
    				y[j].style.backgroundColor = "#999";
    				y[j].style.borderTop="4px solid #999";
    				y[j].style.color = "#666";
    			}
    				y[a].style.borderTop="4px solid #C00";
    				y[a].style.backgroundColor = "#FFF";
    				y[a].style.color = "#C00";
    						
    	}
    
            </script>

4.轮播想要实现的效果,不移上鼠标时,是一个小框在轮播,变颜色,随着图片的轮播,框也变颜色,移上,会出来一个大框,移出,又变成一个小框,效果如下图所示

![1249942-20171112100634513-1257158323.png][]

移上之后

![1249942-20171112100831138-112021695.png][]

<body>
    
       <div id="bo">	
    
                    			<img  class="tu" src="../图片/90.jpg" style="display:block;"/>
    
                    			<img   class="tu" src="../图片/90 2.jpg"/>
    
                   				 <img class="tu" src="../图片/90 3.jpg" />
    
                    			<img class="tu" src="../图片/90 4.jpg"/>
    						<div id="lan7" οnmοuseοut="Chu()">
    
                       			 <div class="k" style="background-color:#F60;" οnmοuseοver="Dian('0')" >
                                 		快节奏的生活  慢一些 放空心灵
                                 </div>
    
                       			 <div class="k" οnmοuseοver="Dian('1')" >美好青春 书写不一样的人生</div>
    
                       			 <div class="k" οnmοuseοver="Dian('2')" >每个人心中都有一个暗兽</div>
    
                       			 <div class="k" style="width:262px; height:50px;" οnmοuseοver="Dian('3')" >游戏背后的历史故事</div>
    
                 
    
               				 </div>
                             
                       <div id="lan8" οnmοusemοve="Zai()">
                                
                                
                                <div class="k2" style="background-color:#F60;" >
                                 		
                                 </div>
    
                       			 <div class="k2" ></div>
    
                       			 <div class="k2" ></div>
    
                       			 <div class="k2" style="width:262px; height:5px;" 				                            ></div>
                                
                                
                                
                                
                        </div>
                             			
                             
           						 </div>
    
    
    
    </body>
    
    
    
    <script type="text/javascript" src="../JS语言/90后特效.js">
    
         var sy = 0; /* 定了一个索引值的变量*/
    
            window.setInterval("Lun()",5000); /*间隔是4秒出来一次图片*/
    
            function Lun()  /*赋这个函数，是让图片来轮播*/
    
            {   
    
                 
    
                var tu = document.getElementsByClassName("tu");
    
                sy++;  // sy加1
    
                 
    
                if(sy>=tu.length) //当sy那个索引值大于等于图片的总长度时，图片轮回到第一张图片
    
                { 
    
                    sy = 0;
    
                }
    
                //让图片循环显示，循环隐藏
    
                for( var i=0;i<tu.length;i++)
    
                { 
    
                    tu[i].style.display = "none";
    
                }
    
                 
    
                tu[sy].style.display = "block";
    
                 
    
                //框随着图片的轮播，变成蓝色。
    
                var k = document.getElementsByClassName("k");
    
                for( var j=0;j<k.length;j++)
    
                { 
    
                    k[j].style.backgroundColor = "#666";
    
                }
    
                k[sy].style.backgroundColor = "#FF8C00";
    
            }
    
            //点哪个框，变蓝色，而且换成哪个图片
    
            function Dian(a)
    
            {   
    
                sy = a;     //a是形参，连着点击框，框里索引着图片
    
                var tu = document.getElementsByClassName("tu");
    
                for( var i=0;i<tu.length;i++)
    
                { 
    
                    tu[i].style.display = "none";   // 图片循环显示，循环隐藏
    
                }
    
                 
    
                tu[a].style.display = "block";
    
                var k = document.getElementsByClassName("k");   //框里的颜色循环变颜色
    
                for( var j=0;j<k.length;j++)
    
                { 
    
                    k[j].style.backgroundColor = "#666";
    
                }
    
                k[a].style.backgroundColor = "#FF8C00";
    
             
    
            }
    		
    		
    		/*轮播的演变*/
    		
    			function Zai()
    			{ 
    				var g = document.getElementById("lan7");
    				g.style.display = "block";
    				var h = document.getElementById("lan8");
    				h.style.display = "none";
    			
    			}
    		function Chu()
    			{ 
    				var lan8 = document.getElementById("lan8");
    				lan8.style.display = "block";
    				var lan7 = document.getElementById("lan7");
    				lan7.style.display = "none";
    			
    			}
    			
    			/*小框的演变*/
    			
    			
    				
    			 window.setInterval("Kuan()",5000);
    			function Kuan()
    			{ 
    			
    			
                 
    
               /* 框随着图片的轮播，变成蓝色。*/
    
                var k2 = document.getElementsByClassName("k2");
    
                for( var f=0;f<k2.length;f++)
    
                { 
    
                    k2[f].style.backgroundColor = "#666";
    
                }
    
                k2[sy].style.backgroundColor = "#FF8C00";
    			
    			}
    
    
    </script>

转载于:https://www.cnblogs.com/zuo72/p/7808625.html

[1249942-20171109113517497-318252269.png]: /images/20211213/78c062ab3f334e949ee32d7cc981f99b.png
[1249942-20171112093122263-1485107244.png]: /images/20211213/3b2fe9446c9b49bbb9b33e1022acb186.png
[1249942-20171112100634513-1257158323.png]: /images/20211213/3716ea12310d4ffbb4b3781761974fb7.png
[1249942-20171112100831138-112021695.png]: /images/20211213/ed73c04e1dbf42b081ef648e8b4b44d3.png