鼠标悬停在小图上，自动出现大图的代码

本文主要是介绍鼠标悬停在小图上，自动出现大图的代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先原图片就是大图片，

<div id="_images" style="border:#000 1px solid;overfow:hidden;width:100px;height:100px"><img id="img" src="15.jpg" width="100" height="100" border="0" οnmοuseοver="show(this)" οnmοuseοut="hide(this)"/></div>

1.小图所在的div，用style=overfow:hidden;width:100px;height:100px;和

<img width="100" height="100" />来限定图片显示大小，只显示为高宽100px

<div id="enlarge_images" style="position: absolute; z-index:2; display:none;"><img id="showimg" src="pixel.gif"  \></div>

2.用于显示大图即原本大小图的div,style=display:none;让它先不显示

<SCRIPT>

function show(_this) {

document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _this.src + "' ></div>";

move_layer(event);  //显示时出现的位置

}

//鼠标悬停在小图上，用enlarge_images层显示

function hide(_this) {

document.getElementById("enlarge_images").innerHTML = "";    document.getElementById("enlarge_images").style.display="none";

}

//鼠标离开，enlarge_images层不显示

function move_layer(_event){

document.getElementById("enlarge_images").style.left=_event.x;

document.getElementById("enlarge_images").style.top=_event.y;

 }

</SCRIPT>

如果是两张图片，改这里

function show(_this) {

document.getElementById("enlarge_images").style.display="";

document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _this.src + "' ></div>";   //_this.src  改成大图的 src

move_layer(event);  //显示时出现的位置

}

//比如小图src是 15.jpg,大图地址应该设置为有规律的,例如15_large.jpg,更改函数

function show(_this) {

var _src = _this.src.replace(/\./ig,"_large.");

document.getElementById("enlarge_images").style.display="";

document.getElementById("enlarge_images").innerHTML = "<div><img src='" + _src + "' ></div>";

move_layer(event);

}

}

document.getElementById("enlarge_images").style.display="";

这里的正则表达式是简单的,把15.jpg中的"."替换为"_large."就得到了15_large.jpg

这篇关于鼠标悬停在小图上，自动出现大图的代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---