滑鼠懸停顯示圖片的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