我写了这个功能:的JavaScript的createElement(),风格问题今天
function zoom(obj){
var img = (!document.getElementById(obj))?false:document.getElementById(obj);
var fullImage = (img.getAttribute("image") == null)?false:img.getAttribute("image");
if(!fullImage || !img) { return false; }
if(!document.getElementById("::img")) {
var ob = "<div id='::img' style='position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;display:none;'></div>";
document.write(ob);}
img.onmousemove = function(e) {
var x = Math.floor(((e.pageX-7) - (img.offsetLeft - 8)) * 100/img.width);
var y = Math.floor(((e.pageY-7) - (img.offsetTop - 8)) * 100/img.height);
x = (x>100)?100:(x<0)?0:x;
y = (y>100)?100:(y<0)?0:y;
var ob = document.getElementById("::img");
ob.style.background = "url('" + fullImage + "') no-repeat";
ob.style.display = 'block';
ob.style.backgroundPosition = x + '% ' + y + '%';
ob.style.left = e.pageX + "px";
ob.style.top = e.pageY + "px";
}
img.onmouseout = function() { document.getElementById("::img").style.display='none'; }
}
我试图用的createElement(),并使用appendChild()函数,而不是这样的:
var ob = `""`; document.write(ob);
但函数不起作用,如何使它与createElement()一起工作。
是否有可能与一行代码添加的所有风格,纯JAVASCRIPT:
ob.style.background = "url('" + fullImage + "') no-repeat";
ob.style.display = 'block';
ob.style.backgroundPosition = x + '% ' + y + '%';
ob.style.left = e.pageX + "px";
ob.style.top = e.pageY + "px";
前瞻:JsFiddle
omg有趣,但我30分钟前曾尝试过同样的事情,它没有工作(我想我错过了什么)..多数民众赞成为什么我用document.write ...谢谢 – John 2011-05-08 11:17:47
谢谢,它为我工作。 – 2014-04-17 10:00:33