1. <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
  2. 		<script type="text/javascript">
  3.  
  4. 			$(function(){
  5. 				var lis=document.getElementsByTagName("li");
  6. 				for (var i=0; i < lis.length; i++) {
  7. 				  lis[i].onmouseover=function(){
                                            //第一种
  8. 				  	// this.style.background="pink";
  9. 				  	// this.style.fontSize="50px"
  10. 				  	//第二种
  11. 				  	this.style.cssText="background:pink;fontSize:50px;";
  12. 				  };
  13.  
  14. 				  lis[i].onmouseout=function(){
  15.  
  16.                                         //第一种
  17. 				  	//this.style.background="";
  18. 				        //this.style.fontSize="20px"
  19. 				  	
                                           //第二种
  20. 				  	this.style.cssText="background:;fontSize:50px;";
  21. 				  };
  22. 				};
  23.  
  24. 			});
  25.  
  26. 		</script>
  27. 	</head>
  28. 	<body>
  29. 		<h1>光棒效果</h1>
  30. 		<ul>
  31. 			<li>好好好</li>
  32. 			<li>好比好</li>
  33. 			<li>好不好 </li>
  34. 		</ul>

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

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

第一种方法：示例代码

  1.                              $(function(){
  2. 				var lis=$("li");
  3. 				 lis.mouseover(function(){
  4. 					// $(this).css("background","pink")
  5. 				 });
  6.  
  7. 				 lis.mouseout(function(){
  8. 				 $(this).css("background","")
  9. 				 });
                                  });

第二种方法 代码如下：

  1.                       $(function(){
  2. 				var lis=$("li");
  3. 				// lis.mouseover(function(){
  4. 					// $(this).css("background","pink")
  5. 				// });
  6.  
  7. 				// lis.mouseout(function(){
  8. 				// $(this).css("background","")
  9. 				// });
  10. 				
                                   //2.hover()方法
  11. 				lis.hover(function(){
  12. 					$(this).css("background","pink");
  13. 				},function(){
  14. 					$(this).css("background","");
  15. 				})
  16. 			});

　　

用js写出光棒效应的两种方法与jquery的两中方法的更多相关文章

  1. GridView控件的光棒效应

    // 光棒效应 protected void gvBookInfos_RowDataBound(object sender, GridViewRowEventArgs e) { if(e.Row.Ro ...

  2. 用js写出一个漂亮的单选框选中效果

    一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...

  3. js写出斐波那契数列

    斐波那契数列:1.1.2.3.5.8.13.21.34.…… 函数: 使用公式f[n]=f[n-1]+f[n-2],依次递归计算,递归结束条件是f[1]=1,f[2]=1. for循环: 从底层向上运 ...

  4. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  5. js写出你的名字的拼音，判断哪个字母出现的最多

    function fn(str) { var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) ...

  6. 编写Java程序_输入三个整数x,y,z，请把这三个数由小到大输出，请写出实现代码。（3种方法）

    要求说明: 输入三个整数x,y,z,请把这三个数由小到大输出. 实现代码: 第1种方法: import java.util.Scanner; public class xyzMaxMin{ publi ...

  7. [翻译]如何用YII写出安全的WEB应用

    前言 虽然本文是基于YII1.1,但其中提到的安全措施适用于多数web项目安全场景,所以翻译此文,跟大家交流.原文地址. 目录 安全基本措施... 2 验证与过滤用户的输入信息... 2 原理... ...

  8. .NET获取不到js写的cookie解决方法

    今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码: C ...

  9. 写出gradle风格的groovy代码

    写出gradle风格的groovy代码 我们先来看一段gradle中的代码: buildscript { repositories { jcenter() } dependencies { class ...

随机推荐

  1. js extend的实现

    var obj = { a: "aaaaaa" }; var obj1 = { b: "bbbbbb" }; Object.extend = function ...

  2. oracle关键字（保留字）

    其实这个东西可以在oracle 上输入一个sql语句就可以得到: select * from v$reserved_words order by keyword asc;   //order 后边不是 ...

  3. PHP与MySql建立连接

    通过PHP脚本建立与一个MySQL数据库的连接时,数据库服务器的主机位置(在本地就是localhost).用户名(root).密码.和数据库名是必须的.一旦建立连接,脚本就能执行SQL命令.二者联系的 ...

  4. TSP问题[动态规划]

    分析: 有用的量:城市集合V={a,b,c,d,--} 所以我们用 T(i,V) 表示从 城市 i 出发遍历集合 V 中的城市一遍且仅一遍后回到 i 所用的最少费用(这里可能表达不好,底下会看到,但是 ...

  5. prism silverlight

    转自  http://www.cnblogs.com/li-xiao/archive/2011/01/13/1934564.html   Prism简介 Prism是由微软Patterns & ...

  6. checkbox、radio控件和文字不对其

    一般使用html控件的时候  单选按钮和复选框的控件和文字不对齐 给input控件加上   style="vertical-align: middle; margin-top: -2px; ...

  7. Intellij Idea 配置并发布tomcat项目

    作为一个菜鸟,我还是很想提高自己.但是既然说了是菜鸟,当然很容易半路折翅 从刚听说intellij idea(以下简称 idea)到现在,应该有超过一个月了吧,我的电脑装了三四次系统了(刚换了一台电脑 ...

  8. excel计算后列填充

    先鼠标选中一个要输出的地方,输入=,然后就可以输入计算的公示,然后按enter,然后鼠标放在这个框的右下角变成十字,然后双击,就填充整列了.

  9. shell 命令合并文本

    之前想把代码打印出来看来着,后来合并完之后放在word里发现有2000多页,然后放弃了~anyway,这个命令还是挺有用的. 比如我有文本a001.dat, a002.dat, a003.dat .. ...

  10. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...