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

2024-09-01 01:32

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

首先原图片就是大图片,
<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

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



http://www.chinasem.cn/article/1125568

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像