- 求助js如何对多个图片进行作用 10C
-
<div id="zuo3"> <img name="img" onmouseover="bigger()" onmouseout="smaller()" src="img/1.jpg" style="cursor:pointer;width:100px;height:100px;" /> <img name="img" onmouseover="bigger()" onmouseout="smaller()" src="img/2.jpg" style="cursor:pointer;width:100px;height:100px;" /> <script type="text/javascript"> var img = document.getElementsByName('img'); function bigger(){ img.name.width = '200px'; img.name.height = '200px'; } function smaller(){ img.name.width = '90px'; img.name.height = '100px'; } </script> </div> 这是我的网页里的代码 我想把鼠标移到图片上的时候，就对图片进行放大，但是不知道为什么这样做会报错 我没怎么学习过js 所以请求大神帮忙解决一下
以上代码已验证（请放心使用）
注意：
1：script块代码可以放在head或body里面，但是script块代码和div代码是相互独立的，你的script代码放在了div里面，应该拿出来
2：此处对象是多张图片，需要用this，和function XXX（obj） 定位到当前对象
有问题可以随时追问，乐意彼此之间交流，如果对你有帮助，请好评，点赞，谢谢！
<br> function bigger(obj){<br> obj.style.width = '120px';<br> obj.style.height = '120px';<br> }<br> function smaller(obj){<br> obj.style.width = '100px';<br> obj.style.height = '100px';<br> }<br>
style="cursor:pointer;width:100px;height:100px;" />
style="cursor:pointer;width:100px;height:100px;" />以上代码已验证（请放心使用）
注意：
1：script块代码可以放在head或body里面，但是script块代码和div代码是相互独立的，你的script代码放在了div里面，应该拿出来
2：此处对象是多张图片，需要用this，和function XXX（obj） 定位到当前对象
有问题可以随时追问，乐意彼此之间交流，如果对你有帮助，请好评，点赞，谢谢！
-
- qq_38692022 不好意思 能详细一点吗
- 大约 2 年之前 回复
var img = document.getElementsByName('img');返回的应该是个数组吧
你用 for循环看看
for(var i=0;i<img.length;i++){
img[i].name.width = '200px';
img[i].name.height = '200px';
}
把图片路径换成你的试一下看看吧。
<div>
<img src="1.jpg" width="200" height="200" alt="图片1" />
<img src="1.jpg" width="200" height="200" alt="图片2" />
</div>
<script type="text/javascript">
window.onload=function(){
var imgs = document.getElementsByTagName("img");
for(var i = 0;i<imgs.length;i++){
imgs[i].onmouseover=function(){
this.setAttribute('width','300');
this.setAttribute('height','300');
}
imgs[i].onmouseout=function(){
this.setAttribute('width','200');
this.setAttribute('height','200');
}
}
};
</script>
你用 for循环看看
for(var i=0;i<img.length;i++){
img[i].name.width = '300px';
img[i].name.height = '300px';
}
style="cursor:pointer;width:100px;height:100px;" />
function bigger(obj){
obj.style.width = '200px';
obj.style.height = '200px';
}
function smaller(obj){
obj.style.width = '90px';
obj.style.height = '100px';
}
这么写
这是用你原来的思路实现的，上面还有用我写的另外一种方法实现的
记得把图片路径换成你的
<div id="zuo3">
<img name="img" width="100" height="100" onmouseover="bigger(this)" onmouseout="smaller(this)" src="1.jpg" />
<img name="img" width="100" height="100" onmouseover="bigger(this)" onmouseout="smaller(this)" src="1.jpg" />
<script type="text/javascript">
function bigger(img){
img.width = '200';
img.height = '200';
}
function smaller(img){
img.width = '100';
img.height = '100';
}
</script>
