dom例子五（鼠标移动提示-div放大-图片轮换）-CSDN博客

案例十三：

图片每隔一定时间，换一张图片，循环展示

<html>
<head>
<title></title>
<script type="text/javascript"> 
 var filename=1;
 alert(filename);
 function Refresh(){
  var imgMM=document.getElementById("imgMM");
  if(!imgMM){
   return;
  }
 /* var now=new Date();
  var filename=now.getHours()+' '+now.getSeconds()+".jpg";*/
  
  if(filename==13) filename=1;
  var s="E:\\picture\\mm\\"+filename+".jpg";
  imgMM.src=s;
  
  filename++;
 }
 setInterval("Refresh()",1000);
</script>
</head>
<body>
<img id="imgMM"src="E:\picture\mm\1.jpg" style="width:400px;height:400px;">
</body>
</html>

问题：转义符 var s="E:\\picture\\mm\\"+filename+".jpg";

案例十四：

div在一个范围内，点击按钮，进行自动放大

<html>
<head>
<title></title>
<script type="text/javascript">	
	var showIntervalId;
	function showDiv(){
		
		showIntervalId=setInterval("inc()",100);
	
	}
	function inc(){
		
		var div1=document.getElementById("div1");
		var oldwidth=div1.style.width;
		oldwidth=parseInt(oldwidth,10);
		var oldheight=div1.style.height;
		oldheight=parseInt(oldheight,10);
		
		if(oldwidth>=200){
			clearInterval(showIntervalId);
			return;
		}
		oldwidth=oldwidth+10;
		oldheight+=10;
		
		div1.style.width=oldwidth+"px";
		div1.style.height=oldheight+"px";
		
	}
</script>
</head>
<body οnlοad="initEvent()">
<div id="div1" style="width:10px;height:10px;background-color:red;"></div>
<input type="button" value="放大" οnclick="showDiv()"/>
</body>
</html>

案例十五：

当鼠标移动到某个网址上，显示提示，鼠标移开时，提示消失

 <html>
<head>
<title></title>
<script type="text/javascript">	
	function initEvent(){
		var links=document.getElementsByTagName("a");
		for(var i=0;i<links.length;i++){
			var link=links[i];
			link.οnmοuseοver=linkMouseOver;
			link.οnmοuseοut=linkMouseOut;
		}
	}
	function linkMouseOver(){
		var div=document.createElement("div");//动态创建层
		div.className="tooltip";//设定样式，方便美化。方便linkMouseOut找到这个层
		div.style.position="absolute";
		div.style.top=window.event.clientY;
		div.style.left=window.event.clientX;
		div.innerHTML="hello welcom to my home<font color='red'>红色的</font>";
		document.body.appendChild(div);//createElement只是内存模型。只有appendChild到一个可视元素中才会被显示出来 
	}
	function linkMouseOut(){
		var divs=document.getElementsByTagName("div");
		for(var i=0;i<divs.length;i++){
			var div=divs[i];
			if(div.className=="tooltip"){
				document.body.removeChild(div);
				div.style.display="none";//隐藏的话会造成内存泄漏
			}
		}
	}
</script>
</head>
<body οnlοad="initEvent()">
<a href="http://www.baidu.com">百度</a><br/><br/><br/>
<a href="http://www.baidu.com">百度</a><br/><br/><br/>
<a href="http://www.baidu.com">百度</a><br/><br/><br/>
<a href="http://www.baidu.com">百度</a><br/><br/><br/>
</body>
</html>