本文目录一览：
- 1、鼠标悬停在小图上，自动出现大图的代码是什么？
- 2、鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？
- 3、鼠标悬停显示图片的js代码 高手帮我看看 位置问题
鼠标悬停在小图上，自动出现大图的代码是什么？
首先原图片就是大图片，
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" onmouseover="show(this)" onmouseout="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").style.display="";
document.getElementById("enlarge_images").innerHTML = "divimg 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 = "divimg 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 = "divimg src='" + _src + "' /div";
move_layer(event);
}
}
这里的正则表达式是简单的,把15.jpg中的"."替换为"_large."就得到了15_large.jpg
如果是其他的样子还要另外改变，具体问题在具体分析，这里就不说了
鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？
代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
!doctype html
html
head
meta charset=utf-8
/head
body
你要显示特效的html
img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" /
div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover"
大图片显示如下
img src="大图片.jpg" width="500px" height="300px" id="bigimg" /
/div
script type="text/javascript"
let divHover = document.getElementById("divHover");
function hoverShowDiv() {
console.log("显示大图片");
divHover.style.display = "block";
divHover.style.top = document.getElementById("littleimg").style.top + 10;
divHover.style.left = document.getElementById("littleimg").style.left + 10;
}
function hoverHiddendiv() {
console.log("显示小图片");
divHover.style.display = "none";
}
/script
/body
/html
鼠标悬停显示图片的js代码 高手帮我看看 位置问题
不用js也可以实现的嘛,
帮你写了一个纯css的版本
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
titletest/title
style type="text/css"
#list li span.img{display:none;}
#list li a{}
#list li a:hover{position:relative;}
#list li a:hover span.img{display:block;position:absolute;top:0;left:30px;}
/style
/head
body
ul id="list"
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
lia href="#"商品span class="img"img src="" alt="百度知道" //span/a/li
/ul
/body
/html