用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","");
})
});
用js写出光棒效应的两种方法与jquery的两中方法的更多相关文章
- GridView控件的光棒效应
// 光棒效应 protected void gvBookInfos_RowDataBound(object sender, GridViewRowEventArgs e) { if(e.Row.Ro ...
- 用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...
- 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循环: 从底层向上运 ...
- 纯JS写出日历
封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...
- js写出你的名字的拼音，判断哪个字母出现的最多
function fn(str) { var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) ...
- 编写Java程序_输入三个整数x,y,z，请把这三个数由小到大输出，请写出实现代码。（3种方法）
要求说明: 输入三个整数x,y,z,请把这三个数由小到大输出. 实现代码: 第1种方法: import java.util.Scanner; public class xyzMaxMin{ publi ...
- [翻译]如何用YII写出安全的WEB应用
前言 虽然本文是基于YII1.1,但其中提到的安全措施适用于多数web项目安全场景,所以翻译此文,跟大家交流.原文地址. 目录 安全基本措施... 2 验证与过滤用户的输入信息... 2 原理... ...
- .NET获取不到js写的cookie解决方法
今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码: C ...
- 写出gradle风格的groovy代码
写出gradle风格的groovy代码 我们先来看一段gradle中的代码: buildscript { repositories { jcenter() } dependencies { class ...
随机推荐
- js 捕获浏览器关闭或者刷新页面给出提示
window.onbeforeunload = function() { return " "; }document.onkeydown = function() {if ((wi ...
- cocos2d-x介绍
总体来说,cocos2d-x是一个优秀的库. Cocos2d-x没有很复杂的一个架构,基本上是一些以单件形式提供的管理器和是一些围绕SceneGraph(CCNode及其派生类)展开的类.这个设计使得 ...
- Struts2配置dtd约束
Struts2和Struts1的区别: 一.elclipse-ee开发 搭建环境eclipse-ee 1.加入jar包 apps/struts2-blank.war解压 2.在web.xml文件中配 ...
- Objective-C中的Hello World
Objective-C在C语言的基础之上,加入了自己的一些独特的特性,而且在Objective-C中兼容C语言原有的用法.在Objective-C中,实现Hello World和C语言有一定的区别,如 ...
- iOS 错误及解决汇总
1. iOS 错误 之 http请求 2. iOS 错误 之 Unexpected interface name 'HomeListCell': expected expression 3. iOS ...
- PHP 下载远程图片
方法一:file_get_contents /**-- 下载远程文件 --**/ function down_img($url){ set_time_limit(60); if($url==" ...
- HDU-1864-最大报销额
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1864 这题开始题意没搞清楚,就做题了,导致浪费了很多的时间,不应该啊, 注意事项:每张发票上,单项物品 ...
- easyui-datagrid分页查询
不想写语言描述了,直接代码吧! js: $(document).ready(function () { var driver_datagrid; $('#job').combobox({ url: ' ...
- Spring3.2AOP实现需要添加的三个包
Spring3.2AOP实现需要添加的三个包 http://down.51cto.com/data/1001395 http://down.51cto.com/data/519542
- HDU5477(模拟)
A Sweet Journey Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...