刚开始学写js,在opera下拿这个网站做练习,做个鼠标悬停放大图片的js
但现在的问题如下:我的代码如下
// ==UserScript==
// @name 鼠标悬停放大图片(minitokyo)
// @author yansyrs
// ==/UserScript==var imgDIV;
var mousePosX;
var mousePosY;if(location.hostname.indexOf("browse.minitokyo.net") != -1){
window.addEventListener(
"DOMContentLoaded",
function(){
//alert("test begin");
var imageCount = document.images.length;
document.onmousemove = getMousePos;
//alert(imageCount);
for(i=0;i<imageCount;i++){
var image = document.images[i];
imgSrc = document.images[i].src;
image.addEventListener("mouseover",function(){showBigImage(imgSrc)},false);
image.addEventListener("mouseout",hideBigImage,false);
}
},false
);
}function getMousePos(event){
mousePosX = event.clientX + window.pageXOffset;
mousePosY = event.clientY + window.pageYOffset;
}function showBigImage(imgURL){
//alert("create BigImage");
//alert(imgURL);
URLEnd = imgURL.substring(34,imgURL.length);
//alert(URLEnd);
imgDIV = document.createElement("div");
imgDIV.style.visibility="visible";
imgDIV.setAttribute("style",
"position:absolute;"+
"background:#ffffff;"+
"border:1px solid;"+
"z-index:999999;"+
"width:auto;"+
"height:auto;"+
"left:"+ mousePosX + "px;" +
"top:" + mousePosY + "px;"
);
bigImgURL = document.createElement("img");
bigImgURL.src = "http://static.minitokyo.net/view" + URLEnd;
imgDIV.appendChild(bigImgURL);
document.body.appendChild(imgDIV);
}function hideBigImage(){
if(imgDIV.style.visibility != "hidden")
imgDIV.style.visibility="hidden";
}
只能放大最后一个图片,不知是哪里出了问题,该怎么改。
请各位大虾帮帮忙,谢谢~
但现在的问题如下:我的代码如下
// ==UserScript==
// @name 鼠标悬停放大图片(minitokyo)
// @author yansyrs
// ==/UserScript==var imgDIV;
var mousePosX;
var mousePosY;if(location.hostname.indexOf("browse.minitokyo.net") != -1){
window.addEventListener(
"DOMContentLoaded",
function(){
//alert("test begin");
var imageCount = document.images.length;
document.onmousemove = getMousePos;
//alert(imageCount);
for(i=0;i<imageCount;i++){
var image = document.images[i];
imgSrc = document.images[i].src;
image.addEventListener("mouseover",function(){showBigImage(imgSrc)},false);
image.addEventListener("mouseout",hideBigImage,false);
}
},false
);
}function getMousePos(event){
mousePosX = event.clientX + window.pageXOffset;
mousePosY = event.clientY + window.pageYOffset;
}function showBigImage(imgURL){
//alert("create BigImage");
//alert(imgURL);
URLEnd = imgURL.substring(34,imgURL.length);
//alert(URLEnd);
imgDIV = document.createElement("div");
imgDIV.style.visibility="visible";
imgDIV.setAttribute("style",
"position:absolute;"+
"background:#ffffff;"+
"border:1px solid;"+
"z-index:999999;"+
"width:auto;"+
"height:auto;"+
"left:"+ mousePosX + "px;" +
"top:" + mousePosY + "px;"
);
bigImgURL = document.createElement("img");
bigImgURL.src = "http://static.minitokyo.net/view" + URLEnd;
imgDIV.appendChild(bigImgURL);
document.body.appendChild(imgDIV);
}function hideBigImage(){
if(imgDIV.style.visibility != "hidden")
imgDIV.style.visibility="hidden";
}
只能放大最后一个图片,不知是哪里出了问题,该怎么改。
请各位大虾帮帮忙,谢谢~
解决方案 »
- IE不能运行本地javascript,为什么?
- 字幕的数据结构问题?求解决
- 求助各位大牛一个js问题,十分感谢!
- js里面当焦点离开发生事件的函数是什么啊?
- js的一个应用,求高手给个写法
- 关于clientWidth,offsetWidth,scrollWidth的问题
- 如何让一个文本框内的文字实现自动换行
- 为什么这样会弹出两个页面?
- easyui datagrid中某列设置editor类型为combobox,combobox如何动态加载json数据,而且每一行的数据不一样
- 请教如何弹出一个输入框,然后得到输入的内容,保存到一个变量中去!
- javascript中alert或confirm对话框中,如何更改系统自带的!或?图标,非常着急!!在线等。多谢各位高人帮忙
- document.getElementsByName("aa")与JQuery的$('[name=aa]')性能比较
image.addEventListener("mouseover",function(){showBigImage(imgSrc)},false);
这句改成
image.addEventListener("mouseover",function(){showBigImage(this.src)},false);
就行了