打印

请高手们帮忙看下JS

ryon1986 [楼主]

初级会员

帖子: 63
体力: 135
威望: 0
离线: 2 天

1^# 大中小发表于 2008-6-27 15:06

这个是加了头部协议的效果

<!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=gb2312" />
<title>无标题文档</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000}
               .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
</div>
<div id="enlarge_images" style="display:none">
     <div class="enlarge_images1"></div>
</div>
<script language="javascript" type="text/javascript">
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	      ts.onmousemove = function(event){
		  	  event = event || window.event;
		      if(ei.style.display !== "block"){
			  	 var offset = 0;
				 var h ;
					 h = document.body.clientHeight - event.clientY;				 
				     if(h < 262){
				 	    offset = 262 - h;
				     }				     
		      	     ei.style.display = "block";
		      	     ei.innerHTML = '<img src="' + this.src + '" />';
		      	     ei.style.top  = document.body.scrollTop + event.clientY - offset + 10 + "px" ;
		      	     ei.style.left = document.body.scrollLeft + 300 + "px";
			  
			  }
	      }
	      ts.onmouseout = function(){
		     if(ei.style.display == "block"){
		      ei.innerHTML = "";
		      ei.style.display = "none";
			 }
		  }	  
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

这个没加头部协议

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000}
               .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
</div>
<div id="enlarge_images" style="display:none">
     <div class="enlarge_images1"></div>
</div>
<script language="javascript" type="text/javascript">
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	      ts.onmousemove = function(event){
		  	  event = event || window.event;
		      if(ei.style.display !== "block"){
			  	 var offset = 0;
				 var h ;
					 h = document.body.clientHeight - event.clientY;				 
				     if(h < 262){
				 	    offset = 262 - h;
				     }				     
		      	     ei.style.display = "block";
		      	     ei.innerHTML = '<img src="' + this.src + '" />';
		      	     ei.style.top  = document.body.scrollTop + event.clientY - offset + 10 + "px" ;
		      	     ei.style.left = document.body.scrollLeft + 300 + "px";
			  
			  }
	      }
	      ts.onmouseout = function(){
		     if(ei.style.display == "block"){
		      ei.innerHTML = "";
		      ei.style.display = "none";
			 }
		  }	  
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

<b>我想请问下，这个可能是对于body.document.body.clientHeight的不同解读，应该怎么样才能达到一致呢，我要的是下面的效果，但是加了头部协议就不行了</b>

[ 本帖最后由 ryon1986 于 2008-6-27 15:07 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

ryon1986 [楼主]

初级会员

帖子: 63
体力: 135
威望: 0
离线: 2 天

2^# 大中小发表于 2008-6-27 15:29

请高手们帮帮忙

这个效果就是鼠标移到最下面的图片时，出来的黑色的层仍能被看到，现在加了头部协议效果不一样了，而我必须要加头部协议，现在很头疼，请高手们帮帮忙

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

hutia

诘屈聱牙

荣誉管理团队

帖子: 4717
体力: 14636
威望: 383
当前: 江苏苏州
离线: 13 天

专长 JS,PHP,ASP

3^# 大中小发表于 2008-6-27 19:45

加了“头部协议”后应该用document.documentElement替代原来的document.body

<!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=gb2312" />
<title>无标题文档</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;width:266px;height:262px;overflow:hidden;text-align:center; background:#000}
               .enlarge_images1{ width:7px; height:262px; float:left; background:url(arrow.gif) no-repeat}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:80px;text-align:center;padding:10px; cursor:pointer">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000001.jpg">
	<img src="R2006_UI000003.jpg">
</div>
<div id="enlarge_images" style="display:none">
     <div class="enlarge_images1"></div>
</div>
<script language="javascript" type="text/javascript">
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	      ts.onmousemove = function(event){
		  	  event = event || window.event;
		      if(ei.style.display !== "block"){
			  	 var offset = 0;
				 var h ;
					 h = document.documentElement.clientHeight - event.clientY;				 
				     if(h < 262){
				 	    offset = 262 - h;
				     }				     
		      	     ei.style.display = "block";
		      	     ei.innerHTML = '<img src="' + this.src + '" />';
		      	     ei.style.top  = document.documentElement.scrollTop + event.clientY - offset + 10 + "px" ;
		      	     ei.style.left = document.documentElement.scrollLeft + 300 + "px";
			  
			  }
	      }
	      ts.onmouseout = function(){
		     if(ei.style.display == "block"){
		      ei.innerHTML = "";
		      ei.style.display = "none";
			 }
		  }	  
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

请大家尊重和保护奥运知识产权。