html鼠标滑过图片，让原图在另一个IMAGE里显示出来_随笔

因为你是在img里面写的onclick=“danji（）”。这样的话是没有办法获取到this.src这个属性的值得。所以没有办法显示。你可以换成以下代码，将需要点击的图片获取成一个对象，对你的对象进行绑定点击事件。即可

<body>

</body>

document.getElementById('clickThis').onclick = function () {

console.log(this.src)

document.getElementById("im").src = this.src

}

</script>

要是想鼠标经过的时候就将onclick换成onmouseover即可

假如你需要把所有的图片显示在140*226的区间里面，那么就使用下面这样的代码（代码在我的网站正常使用，没有问题）：

<img src=2009/04/1232336585-19.jpg onload='if (this.width>140 || this.height>226) if (this.width/this.height>140/226) this.width=140else this.height=226'>

原理：

用JS在加载图片后判断图片是否突破规定的高和宽，如果超过再根据图片的宽高比例进行调整。特别说明，JS代码只限制图片的高或者宽时，宽或者高会按照比例进行相应调整。

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/7350666.html

html鼠标滑过图片，让原图在另一个IMAGE里显示出来

发表评论

评论列表（0条）