js實現表格行懸停高亮與兩側橫幅廣告特效案例！
知識點：
1、樣式或屬性值中間有“-”，我們稱為長屬性，比如修改background-color，該對象.backgroundColor=”值”;
2、變量作用域
源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.div1{
width:400px;
height:30px;
margin-bottom:3px;
}
</style>
</head>
<body>
<div style="background-color:#94A4CD;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)"><a href="#" title="xww">測試標題測試標題測試標題測試標題測試標題</a></div>
<div style="background-color:#82AC9E;" onmouseover="OnMouseoverBG(this);" onmouseout="OnmouseoutComeBack(this)">測試標題測試標題測試標題測試標題測試標題</div>
<div style="background-color:#94A4CD;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">測試標題測試標題測試標題測試標題測試標題</div>
<div style="background-color:#82AC9E;" onmouseover="bgc1=this.style.backgroundColor;this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor=bgc1;">測試標題測試標題測試標題測試標題測試標題</div>
<div>測試標題測試標題測試標題測試標題測試標題</div>
<div>測試標題測試標題測試標題測試標題測試標題</div>
</body>
<script language="javascript" type="text/javascript">
var bgc;//原來的背景色，注意變量的作用域
//懸停高亮顯示
function OnMouseoverBG(obj){
bgc=obj.style.backgroundColor;
obj.style.backgroundColor="blue";
obj.style.cursor="pointer";
}
//鼠標移開背景還原
function OnmouseoutComeBack(obj){
obj.style.backgroundColor=bgc;
}
</script>
</html>
二、兩側橫幅廣告
實現效果如下
知識點：
1、頁面加載事件
body的onload事件，是頁面加載事件，頁面打開，或每次刷新時調用，而且只會這時候執行一次。
2、窗口的事件調用函數必須
Window.onscroll=函數名;
3、字符串類型轉換成數值： parseFloat(變量);
4、超鏈接調用JS函數：
<a href="javascript:CloseGuanggao();"> 關 閉 </a>
或者
<a href="javascript:void(null);" onclick="CloseGuanggao()"> 關 閉 </a>
完整源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body style="overflow-x:hidden;" onload="Init()">
<img src="bg.jpg" height="1000px" />
<div id="divguanggao" name="divguanggao" style="z-index:1; position:absolute; width:120px; height:400px; top:8px; left:3px; float:left;">
<a href="http://www.cwhell.com"><img src="guanggao.jpg" /></a>
<div style="z-index:2; position:absolute; left: 77px; top: 9px;"><a href="javascript:void(null);" onclick="CloseGuanggao()"> 關 閉 </a></div>
</div>
<div id="divguanggao" name="divguanggao" style="z-index:1; position:absolute; top:8px; left:1143px;">
<img src="guanggao.jpg" />
</div>
</body>
<script language="javascript" type="text/javascript">
//初始化，獲取廣告DIV的頂部
var y=0;
function Init(){
var divguanggao=document.getElementsByName("divguanggao")[0];
var pxp=divguanggao.style.top.indexOf("px");//lastIndexOf
y=divguanggao.style.top.substr(0,pxp);
y=parseFloat(y);//字符串類型和數值轉換
}
//滾動廣告跟隨
function GuanggaoScroll(){
var st=document.body.scrollTop;//獲取垂直方向滾動的距離
var divguanggaoes=document.getElementsByName("divguanggao");
for(var i=0;i<divguanggaoes.length;i++){
divguanggaoes[i].style.top=(y+st)+"px";
}
}
//關閉2個廣告
function CloseGuanggao(){
var divguanggaoes=document.getElementsByName("divguanggao");
for(var i=0;i<divguanggaoes.length;i++){
divguanggaoes[i].style.display="none";
}
}
window.onscroll=GuanggaoScroll;//不能放小括號
</script>
</html>
相關推薦
