<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. ARM处理器寄存器

    参考:ARM Architecture Reference Manual的39页 1.ARM处理器寄存器纵览 ARM微处理器共有37个32位寄存器,其中31个为通用寄存器(R13和R13_svc不是同 ...

  2. ios数据存储——数据库:SQlite3以及第三方库FMDB

    [reference]http://blog.csdn.net/mad1989/article/details/9322307 原生数据库:SQlite3 一.必备条件 在ios项目中使用sqlite ...

  3. scrollview嵌套gridview滑动问题

    在开发过程总遇到ScrollView嵌套GridView,由于这两种控件都带有滚动条,当他们碰到一起的时候便会出问题,问题是gridview不滚动,并且只显示两行,为此看了官方文档,谷歌回答滚动里面没 ...

  4. Antx简介(ali_PPT)

    Antx的由来: §最早,我们用Makefile来build系统 •Makefile不适合Java的编译 §后来,我们用Ant来build系统 •开始时很不错 •随着项目增多,出现困难 §利用bean ...

  5. Zepto 使用中的一些注意点(转)

    http://www.zeptojs.cn/     zepto英文站在线文档 http://www.css88.com/doc/zeptojs_api/       zepto中文站在线文档 htt ...

  6. Angular - - angular.Module

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  7. js原生设计模式——2面向对象编程之js原生的链式调用

    技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...

  8. Intent对象详解——使用Intent启动系统组件

    Android的应用程序包含三种重要组件:Activity.Service.BroadcastReceiver,应用程序采用一致的方式来启动它们——都是依靠Intent来启动的,Intent就封装了程 ...

  9. RMAN中FILESPERSET设置对备份速度的影响

    看到网上部分人说不指定FILESPERSET(默认值=64)则会导致分配的通道只走第一个而导致备份效率低下,今天仔细研究了一下,参照了多个博主文章,得出结论如下: 如果没有指定filesperset, ...

  10. Flex 数据绑定

    Flex 数据绑定 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...