用js写出光棒效应的两种方法与jquery的两中方法

<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			
			$(function(){
				var lis=document.getElementsByTagName("li");
				for (var i=0; i < lis.length; i++) {
				  lis[i].onmouseover=function(){
                                        //第一种
				  	// this.style.background="pink";
				  	// this.style.fontSize="50px"

				  	//第二种
				  	this.style.cssText="background:pink;fontSize:50px;";
				  };
				  
				  lis[i].onmouseout=function(){

                                        //第一种
				  	//this.style.background="";
				        //this.style.fontSize="20px"
				  	
                                       //第二种
				  	this.style.cssText="background:;fontSize:50px;";
				  };
				};
				
			});
			
		</script>
	</head>
	<body>
		<h1>光棒效果</h1>
		<ul>
			<li>好好好</li>
			<li>好比好</li>
			<li>好不好 </li>
		</ul>

用js的两种方法，写出光棒效应，代码如上。

下面是jquery的两中方法　 mouseover（） mouseout（）与 hover（）

第一种方法：示例代码

                             $(function(){
				var lis=$("li");
				 lis.mouseover(function(){
					// $(this).css("background","pink")
				 });
				
				 lis.mouseout(function(){
				 $(this).css("background","")	
				 });
                              });

第二种方法代码如下：

                      $(function(){
				var lis=$("li");
				// lis.mouseover(function(){
					// $(this).css("background","pink")
				// });
				
				// lis.mouseout(function(){
				// $(this).css("background","")	
				// });
				
                               //2.hover()方法
				lis.hover(function(){
					$(this).css("background","pink");
				},function(){
					$(this).css("background","");	
				})
			});

posted @ 2017-02-23 16:24 土上方方阅读(454) 评论(0) 收藏举报

刷新页面返回顶部