<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","");

				})

			});

　　

用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. android 多线程Thread,Runnable,Handler,AsyncTask

    先看两个链接: 1.http://www.2cto.com/kf/201404/290494.html 2. 链接1: android 的多线程实际上就是java的多线程.android的UI线程又称 ...

  2. C#索引器的用法

    索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...

  3. C # 产生鼠标点击事件

    新建一个WinFrom,找到MouseDown,回车,生成代码如下点击的效果如图 参考文章:http://blog.csdn.net/u012842807/article/details/454143 ...

  4. UVa 10341 - Solve It

    题目:给一个方程,求解方程的解.已给出解的范围,并且可知方程等号左侧的函数是递减的,可用二分法进行试探,直到得出给定误差范围内的解. #include <cstdio> #include ...

  5. 使用python爬取MedSci上的期刊信息

    使用python爬取medsci上的期刊信息,通过设定条件,然后获取相应的期刊的的影响因子排名,期刊名称,英文全称和影响因子.主要过程如下: 首先,通过分析网站http://www.medsci.cn ...

  6. 在windows上搭建ipv6代理

    事出有因,学校每天12:00之后断网,断网之后怎么办?难道直接睡了?我不甘心.     幸好学校还是留有余地,在断网之后,还是能够上ipv6的,只是现阶段互联网对ipv6支持很不理想,怎么办?刚刚发现 ...

  7. beforeunload

    <!DOCTYPE html> <html> <head> <title>BeforeUnload Event Example</title> ...

  8. shell相关命令

    1.shell是什么? 从用户角度:shell是用户与Linux沟通的桥梁 从程序员角度:shell本身是一种用C语言编写的程序 shell担任了翻译的角色,将用户输入的命令翻译成Linux能够识别的 ...

  9. eclipse 工具栏修改

    本来和同学约好一起去吃饭的,刚电话说有亲戚过来了,叫我一起去吃 哪有那个闲心,去陪他们吃饭 刚好,把这个一起写了 相信很多人会很烦,eclipse的工具栏太多了,折了一行下来,看着不好看,还烦(本人觉 ...

  10. php中利用array_filter过滤数组为空值

    [导读] 在我们开发过程中,判断数组为空时你会想到什么方法呢?首先想到的应该是empty函数,不过直接用empty函数判断为空是不对的,因为当这个值是多维数的时候,empty结果是有值的.其实我们可以 ...