请教div随鼠标的移动改变颜色 语句解释 谢谢
如题 不都解释 有几句不明白 简要的看过就js 看到例子还是有点发蒙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例</title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover 这个好像是没实现吧{
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) 2这个是干嘛的意思呢 截取吗[color=#FF0000][/color]
{
continue; 这句是去哪了？
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function() 这句往下就不明白了尤其hover this classname{
this.className += ' hover';
}
dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' );
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a><a href="http://www.dreamdu.com/xhtml/tag_div/">div</a>标签</div>
<div>这个没有改变颜色。</div>
<div class="dreamdu">颜色随着鼠标的指向在变。</div>
</body>
</html>
谢谢 高手给解释
[解决办法]
楼主同志这样就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover 这个好像是没实现吧 {
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) //2这个是干嘛的意思呢 截取吗
{
continue; 这句是去哪了？
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function() // 这句往下就不明白了尤其hover this classname
{
this.className += ' hover';
}
dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' );
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div>
<div class="dreamdu">这个没有改变颜色。 </div>
<div class="dreamdu">颜色随着鼠标的指向在变。 </div>
</body>
</html>
下次不要正这么长得代码出来
[解决办法]
首先看这句，window.onload=DreamduColorfulDiv; //当页面加载完毕时调用函数DreamduColorfulDiv()；
函数DreamduColorfulDiv对于className为"dreamdu"的div，设置其onmouseover,和onmouseout事件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div随着鼠标的移动改变颜色示例 </title>
<style type="text/css" media="all">
body
{
color:#000;
}
.dreamdu:hover,.hover
{
background: #4870CB;
color: #faf;
}
div
{
width:300px;margin:10px;border:1px solid green;
}
</style>
<script type="text/javascript">
/*
* 功能：使div的背景随着鼠标的移动改变颜色
* 作者：可爱的猴子 www.dreamdu.com/blog/
*/
function DreamduColorfulDiv()
{
var dreamdurows = document.getElementsByTagName('div');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) //判断div标签的className是不是"dreamdu"
//用substr的意图是如果后面有空格也算相等。
{
continue; 这次for循环结束，进入下一次。比如现在i=1;它不会执行下面的语句，而是跳到for循环开头执行i++;
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function() //注册事件
{
this.className += ' hover'; 把className变为"dreamdu hover";
}
dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' ); //className变为"dreamdu"；
}
}
}
}
window.onload=DreamduColorfulDiv;
</script>
</head>
<body>
<div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div>
<div>这个没有改变颜色。 </div>
<div class="dreamdu">颜色随着鼠标的指向在变。 </div>
</body>
</html>
[解决办法]
substr(index1,index2) 这方法 是截取返回index1至index2字符串内容 （其中包含index1,不包含index2）
continue 表示继续， 在你上面代码里 意思就是 继续往下走，直接到下1个if语句了。感觉这个continue用的不好```
this 可以使你直接引用对象，可以解决可能在实例变量和局部变量之间任何同名引起的冲突。
[解决办法]
- JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div随着鼠标的移动改变颜色示例 </title> <style type="text/css" media="all"> body //定义body样式{ color:#000; } ,.dreamdu:hover,.hover {//这里的这个样式似乎写错了,应该是.dreamdu{} ,.dreamdu是一个类选择器,在标签中使用class="dreamdu"来使用这个样式 background: #4870CB; //背景色 color: #faf; } div //定义div样式{ width:300px;//宽为300px margin:10px;//上边缘留10px border:1px solid green; //边框1px加细绿色} </style> <script type="text/javascript"> /* * 功能：使div的背景随着鼠标的移动改变颜色 * 作者：可爱的猴子 www.dreamdu.com/blog/ */ function DreamduColorfulDiv() { var dreamdurows = document.getElementsByTagName('div'); //根据标签名称来取得div对象,注意返回的是所有div类型的对象,所以是一个数组 for ( var i = 0; i < dreamdurows.length; i++ ) { //遍历dreamdurows数组 if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ){ //截取数组中每个元素的样式名称是否为'dreamdu',substr(0,7)的意思是截取从第0个字符,长度为7个字符 continue;//如果不等,则跳出,直接进行下一次循环(不会执行下面的代码了) }//end of if if ( navigator.appName == 'Microsoft Internet Explorer' ){ //判断是否为IE // ie不支持 :hover，所以... dreamdurows[i].onmouseover = function(){//为数组中的元素添加事件onmouseover this.className += ' hover'; //这个好像是css中的伪类，具体用法我也不清楚，可以问下google :) } dreamdurows[i].onmouseout = function() { //为数组中的元素添加事件onmouseout this.className = this.className.replace( ' hover', '' ); //将样式中的'hover'替换成'' } }//end of if } //end of for} //end of function DreamduColorfulDiv()window.onload=DreamduColorfulDiv; //页面加载时调用DreamduColorfulDiv</script> </head> <body> <div class="dreamdu"> <a href="http://www.dreamdu.com/javascript/">JavaScript教程 </a> <a href="http://www.dreamdu.com/xhtml/tag_div/">div </a>标签 </div> <div>这个没有改变颜色。 </div> <div class="dreamdu">颜色随着鼠标的指向在变。 </div> </body> </html>
[解决办法]
对啊， this只是个习惯。 而且this不是打着也简单么```