问一个JS的问题，对JS不熟悉

[初级后端工程师]

下面的代码是放大图片我网上找的，我不懂JS。

可以用 但就是一个问题 当它弹出来的那张放大图片 是我数据库原始图片的 尺寸 太大了 盖住整个网页

我想要给 弹出来的图片加一个 576 x 407 的固定大小 不知道怎么弄 麻烦致电一下 谢谢。



<script type="text/javascript">
window.onload = function() {
var aLi = document.getElementsByTagName("span");
var oBig = document.getElementById("big");
var oLoading = oBig.getElementsByTagName("div")[0];
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
//鼠标划过, 预加载图片插入容器并显示
aLi[i].onmouseover = function() {
var oImg = document.createElement("img");
//图片预加载
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");
//插入大图片

oBig.appendChild(oImg);
//鼠标移过样式
this.className = "active";
//显示big
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (oImg.onload = function() { oLoading.style.display = "none"; })
};
//鼠标移动, 大图容器跟随鼠标移动
aLi[i].onmousemove = function(event) {
var event = event || window.event;
var iWidth = document.documentElement.offsetWidth - event.clientX;
//设置big的top值
oBig.style.top = event.clientY + 20 + "px";
//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";
};
//鼠标离开, 删除大图并隐藏大图容器
aLi[i].onmouseout = function() {
this.className = "";
oBig.style.display = "none";
//移除大图片
oBig.removeChild(oBig.lastChild)
}
}
};
</script>

[峭沙]

代码没给全，var oBig = document.getElementById("big");是个img么？

	<script type="text/javascript">
		window.onload = function() {
			var aLi = document.getElementsByTagName("span");
			var oBig = document.getElementById("big");
			oBig.width = 576;
			oBig.height = 407;
			var oLoading = oBig.getElementsByTagName("div")[0];
			var i = 0;
			for (i = 0; i < aLi.length; i++) {
				aLi[i].index = i;
				//鼠标划过, 预加载图片插入容器并显示
				aLi[i].onmouseover = function() {
				var oImg = document.createElement("img");
				//图片预加载
				var img = new Image();
				img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");
				//插入大图片
				
				oBig.appendChild(oImg);
				//鼠标移过样式
				this.className = "active";
				//显示big
				oBig.style.display = oLoading.style.display = "block";
				//判断大图是否加载成功
				img.complete ? oLoading.style.display = "none" : (oImg.onload = function() { oLoading.style.display = "none"; })
				};
				//鼠标移动, 大图容器跟随鼠标移动
				aLi[i].onmousemove = function(event) {
				var event = event || window.event;
				var iWidth = document.documentElement.offsetWidth - event.clientX;
				//设置big的top值
				oBig.style.top = event.clientY + 20 + "px";
				//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.
				oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";
				};
				//鼠标离开, 删除大图并隐藏大图容器
				aLi[i].onmouseout = function() {
				this.className = "";
				oBig.style.display = "none";
				//移除大图片
				oBig.removeChild(oBig.lastChild)
				}
			}
		};
	</script>

[bohe_198878]

把图片放在div里就是了

[Mr-Jee]

var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace("s_", "");

img.width='576';
img.height='407';

[初级后端工程师]

[Quote=引用 5 楼 feng3773216 的回复:]
lz是想让这个图片再随着滚动条走吗，那可能就会导致鼠标移动事件函数有问题了。。。
[/Quot
就是它弹出来的层 不会随着浏览器往下滚动 导致页面下面的图片弹出来 仍然在页面的顶部.....

[初级后端工程师]

已经弄好了。给弹出的那个层加CSS属性
#big{position:fixed; _position:absolute; bottom:100px;_top:expression(documentElement.scrollTop+document.documentElement.clientHeight-100); right:0;width:576px;height:407px;border:2px solid #ddd;display:none;}

给有遇见一样的同学参考了。谢谢大家.

[初级后端工程师]

现在宽度和 高度的问题解决了

还有一个就是如果 页面拉到底下 把鼠标移上去 图片是显示在 页面的上面 看不到了 要怎么解决

[休谱诺斯]

lz是想让这个图片再随着滚动条走吗，那可能就会导致鼠标移动事件函数有问题了。。。

[_懒猫]

弹出的图片放在div里面，在创建div的时候设置其大小。。