鼠标移上去显示大图的代码用onMouseOver力量聚合网A5下载资源-CSDN文库

共3个文件

js：1个

html：1个

css：1个

JS代码

图片特效

JS广告代码

JS特效代码

需积分: 4 55 浏览量 2010-05-17 06:16:04 上传评论收藏 4KB RAR 举报

在网页设计中，为了提升用户体验，常常会使用到一种交互效果：当鼠标移动到图片上时，图片会放大展示更多的细节。这种效果通常通过JavaScript（JS）和CSS（Cascading Style Sheets）来实现。标题提到的“鼠标移上去显示大图的代码”就是这样一个例子，它利用了JavaScript的`onMouseOver`事件来触发图片的放大效果。下面将详细解释这个技术实现以及相关知识点。 `onMouseOver`是JavaScript中的一个事件，它在用户鼠标指针移动到某个元素之上时触发。在这个场景中，我们可以将其应用于图片元素，当鼠标悬停在图片上时，执行相应的函数或代码块，实现图片放大功能。在HTML中，我们需要定义图片元素，并为其添加`onMouseOver`事件监听器。例如： ```html <img src="small.jpg" onmouseover="showBigImage(this)" alt="Small Image"> ``` 这里的`showBigImage(this)`是当鼠标移到图片上时调用的JavaScript函数，`this`关键字代表当前触发事件的元素，即图片元素本身。接下来，我们创建JavaScript函数`showBigImage()`来处理图片放大。这可能包括以下步骤： 1. 预先加载大图资源：为了避免用户在鼠标悬停时等待大图加载，可以在页面加载时就预加载大图。 2. 创建或修改元素：在`showBigImage()`函数中，可以创建一个新的`<img>`元素或者修改现有元素，用于显示放大后的图片。 3. 设置大图源：将大图的URL设置为新元素的`src`属性。 4. 设置样式：通过CSS修改新元素的样式，如位置、大小、透明度等，使其覆盖原图并显示大图。 5. 添加到DOM：将新元素插入到DOM中，通常会将其作为原图的兄弟元素，以便于定位。同时，我们还需要一个`onMouseOut`事件来处理鼠标离开图片时的逻辑，比如隐藏放大后的图片，恢复原状： ```html <img src="small.jpg" onmouseover="showBigImage(this)" onmouseout="hideBigImage(this)" alt="Small Image"> ``` 对应的`hideBigImage()`函数将删除或隐藏大图元素。在CSS方面，我们可以定义一些样式来控制放大图片的显示效果，例如： ```css .hidden { display: none; } .large-image { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.5s ease-in-out; } .large-image.show { opacity: 1; } ``` 以上CSS规则中，`.hidden`用于隐藏大图元素，`.large-image`定义了放大图片的基本样式，`.show`类用于在鼠标悬停时改变大图的透明度，实现平滑过渡效果。通过这样的组合，我们可以创建出一个鼠标移上去显示大图的交互效果。在提供的压缩包文件中，`index.html`很可能是包含这个效果的HTML页面，`js`目录可能包含实现上述功能的JavaScript文件，而`css`目录则包含对应的CSS样式表。通过分析这些文件，我们可以深入理解代码的实现细节。如果你想要在自己的网站上实现类似的功能，可以参考这个例子进行调整和优化。

资源推荐

资源详情

资源评论

收起资源包目录

onMouseOver.rar （3个子文件）

ToolTip.js 6KB

css

index.css 866B

index.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为鼠标移上去显示大图的代码，属于站长常用代码，更多图片特效代码请访问A5下载—网页特效频道。" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <title>鼠标移上去显示大图的代码用onMouseOver 力量聚合网A5下载</title> </head> <body style="text-align:center"> <div class="latestWeb"> <ul> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/ZhongGuoRenTi/2010/4342.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100424/1-10042416421U57.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100424/1-100424164250.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/ZhongGuoRenTi/2010/4315.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100324/1-1003241AI4T7.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100324/1-1003241A602.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/QingChunWeiMei/2010/4364.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100427/1-10042GA61c43.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100427/co10042GF035-0.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/QingChunWeiMei/2010/4363.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100427/1-10042GA043638.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100427/co10042GA343-0.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/mingxingxiezhen/2010/4355.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100426/1-100426233040354.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100426/1-100426232539.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/mingxingxiezhen/2010/4354.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100427/1-10042F004122N.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100426/1-100426231U4.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/zhifuyouhuo/2010/4359.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100427/1-10042G62355450.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100427/co10042G61227-0.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/zhifuyouhuo/2010/4357.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100427/1-10042G62630202.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100427/co10042G55156-0.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/RiHanRenTi/2010/4321_9.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100325/1-1003250UH1926.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100325/1-1003250U639.jpg>')" onMouseOut="toolTip()"></a></div> </li> <li class=""> <div style="width:128px; height:126px"><a href="http://www.zxiezhen.com/html/RiHanRenTi/2010/4324_2.html" target="_blank"><img src='http://www.zxiezhen.com/uploads/100325/1-1003250ZZIX.jpg' onMouseOver="toolTip('<img src=http://www.zxiezhen.com/uploads/allimg/100325/1-1003250ZS5.jpg>')" onMouseOut="toolTip()"></a></div> </li> </ul> </div> <script language="javascript" src="js/ToolTip.js"></script> <p>代码整理：<a href="http://down.liliangjuhe.com/upfiles/js/onMouseOver.rar" target="_blank">源码下载</a>　来源：<a href="http://www.websjy.com/bbs/">设计源交流论坛</a></p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> <p><p>鼠标移上去显示大图的代码</p></p> <p></p> </body> </html>

评论收藏

内容反馈