鼠标悬停显示图片的js代码（js鼠标悬停放大图片）

本文目录一览：

• 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