您的位置:

鼠标悬停显示图片的js代码(js鼠标悬停放大图片)

鼠标悬停显示图片的js代码(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

鼠标悬停显示图片的js代码(js鼠标悬停放大图片)

本文目录一览: 1、鼠标悬停在小图上,自动出现大图的代码是什么? 2、鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片? 3、鼠标悬停显示图片的js代码 高手帮我看看 位置问题 鼠标悬停在小

2023-12-08
JS鼠标悬停显示文字

2023-05-18
js鼠标显示文字,js鼠标选中的文字加样式

2023-01-08
js实例图片,js 处理图片

本文目录一览: 1、js鼠标悬停显示文字实例 2、如何用JS语句显示图片? 3、js实现单击图片放大图片的方法 js鼠标悬停显示文字实例 一、首先需要div布局:!DOCTYPE htmlhtml l

2023-12-08
js鼠标示例代码,js鼠标示例代码是什么

本文目录一览: 1、js怎么编写鼠标的右击事件 2、JS控制鼠标点击的代码 3、JS鼠标事件大全 JS鼠标事件有哪些 4、js鼠标悬停显示文字实例 5、如何用JS写鼠标触发事件 js怎么编写鼠标的右击

2023-12-08
提高网站用户体验,如何优化鼠标悬停图片放大效果

2023-05-20
深入了解JS鼠标悬停事件

2023-05-21
VueHover:如何实现Vue.js的鼠标悬停效果

2023-05-21
如何优雅地实现鼠标悬停出现隐藏文字?

2023-05-16
用js做鼠标代码,编程用鼠标

本文目录一览: 1、JS鼠标事件大全 JS鼠标事件有哪些 2、js代码 我有一段js代码 是鼠标单击实现复制的功能。但是我不会改 求大神 3、js怎么设置鼠标位置 4、怎么编程实现JS,鼠标事件 5、

2023-12-08
js编写图片手动滚动的代码(js滚动图片怎么做)

本文目录一览: 1、怎么用JS脚本使多张图片滚动? 2、js实现图片滚动效果 3、求JS图片滚动代码 怎么用JS脚本使多张图片滚动? 推荐使用marquee实现图片滚动,示例:marqueescrol

2023-12-08
图片转js代码(js页面转图片)

本文目录一览: 1、js实现图片旋转效果 2、图片链接用JS跳转代码怎么写 3、怎么制作网页中图片转换,就是一幅一幅的显示,跟淘宝网的商品展示一样,用到JS代码,代码怎么编写? 4、js图片转换代码,

2023-12-08
Vue中的鼠标悬停事件Vue.onmouseover

2023-05-22
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
js写轮播图代码(js轮播图怎么写)

本文目录一览: 1、javascript 轮播 缩略图 怎么实现 2、怎么用js的原生写法写出来一个轮播图呢? 3、JS轮播图,当鼠标悬停于图片时停止轮播,移开继续,代码怎么写? 4、求一个简单的js

2023-12-08
js轮播图代码,js轮播图代码左右切换

2022-11-26
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
php鼠标滚动加载的简单介绍

2022-11-27
如何优化网页链接的悬停效果

2023-05-12
CSS鼠标细节解析

2023-05-19