鼠标悬停之放大图片的效果 - - ITeye博客

`

eggbucket1

浏览: 81210 次
性别:
来自: 苏州

最近访客更多访客>>

jiangcon

心杀心

z137384812

lwhwhy

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (133)

社区版块

存档分类

最新评论

lgclove1314：请问：import org.tempuri.ArrayOfSt ...
XFire调用Web服务取得天气预报
Xgw123485：很强大呀！
铸造JavaWeb利器
littleJava：写的很详细
JDK5.0新特性Annotation之@Retention注解

鼠标悬停之放大图片的效果

阅读更多

<script type="text/javascript" language="javascript"> function showimg(imgpath){ var x = event.clientX; var y = event.clientY; /*alert(imgpath);*/ document.getElementById("popup").innerHTML = "<img src='" + imgpath + "' width=280 height=280/>"; document.getElementById("popup").style.top = y + 50; document.getElementById("popup").style.left = x; document.getElementById("popup").style.visibility = "visible" } function clearimg(){ document.getElementById("popup").style.visibility = "hidden" } </script> <body> <font color="blue"><strong>当鼠标放到图片上时，会弹出一个放大的图片</strong></font> <BR/> <BR/> <font color="green"><strong>当鼠标从图片上移出时，弹出的图片就会消失</strong></font> <BR/> <BR/> <img src="images/丢丢丢.gif" onmouseover="showimg('images//丢丢丢.gif')" onmouseout="clearimg();"> <div id="popup" style="position: absolute; border: solid 2px; visibility: hidden" /> </body>

分享到：

启动Eclipse时选择工作空间 | 个人收集Web站点

2010-09-05 18:23
浏览 819
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

网页特效-图片特效-鼠标悬停图片放大效果: ### 网页特效-图片特效-鼠标悬停图片放大效果 #### 一、概述在现代网页设计中，为了提升用户体验与交互性，设计师们常常会加入各种动态效果，其中“鼠标悬停图片放大”是一项非常实用且常见的功能。通过CSS与HTML...

Js实现鼠标悬停放大图片.rar: "Js实现鼠标悬停放大图片"是一个常见的交互式功能，常用于电商网站的商品展示，让用户在不离开当前页面的情况下，能够更清晰地查看商品细节。这个功能主要依赖JavaScript来实现，其中提到了一个名为"expando.js"的JS...

鼠标悬停图片放大插件(带标题遮罩层): 在网页中，图片通常由`<img>`标签表示，而插件通过监听这些元素的鼠标悬停事件，改变图片的CSS属性（如`transform`或`zoom`）来实现放大效果。在CSS3中，`transform`属性可以方便地对元素进行缩放，而不会改变其在...

基于jQuery的鼠标悬停时放大图片的效果演示: "基于jQuery的鼠标悬停时放大图片的效果演示"是一个典型的交互式设计技术，它通过JavaScript库jQuery实现，增强了用户对图片的查看体验。当用户将鼠标指针悬停在图片上时，图片会变得稍微暗淡，并在旁边或上方弹出一...

jquery鼠标悬停放大图片: "jQuery鼠标悬停放大图片"是一个常见的功能，它可以使用户在鼠标指针悬停在图片上时看到放大的图像细节，从而增强视觉效果和用户对图片内容的理解。这个例子中，我们将深入探讨如何使用jQuery库实现这一功能，并涉及...

懒人原生css3鼠标悬停图片放大动画效果: 当鼠标悬停上后图片逐渐放大，鼠标移走后，图片逐渐恢复当登录天猫首页的时候，banner大图就会有这种逐渐变化的效果今天特意写了一个供给懒人们使用注意：css3属性，不支持低版本浏览器 ...

jQuery鼠标悬停图片放大效果.zip: 本教程将详细讲解如何利用jQuery实现一个简单的鼠标悬停图片放大效果，这是一个常见的JS特效，常见于图片相册或者产品展示页面。首先，我们需要在HTML中设置一个图片元素，用于显示待放大的图片。例如： ```html ...

jquery鼠标悬停图片放大: 以上就是使用jQuery实现鼠标悬停图片放大效果的基本步骤。通过这种方式，我们可以轻松地为网页增添互动性，提高用户体验。当然，还有其他更复杂的方法，例如使用CSS3的`transform`属性，或者结合使用`transition`...

HTMLhtml鼠标悬停图片放大: "HTMLhtml鼠标悬停图片放大"这个主题，就是关于如何利用HTML5和CSS3来实现一个常见的用户体验增强效果：当用户将鼠标指针悬停在图片上时，图片会自动放大，提高视觉吸引力。首先，我们需要了解HTML的基础结构。...

css 实现鼠标悬停放大图片: 在网页设计中，实现鼠标悬停放大图片是一种常见的交互效果，可以增强用户的浏览体验。本文将详细介绍如何使用HTML、CSS以及JavaScript实现这一功能，并通过分析`css3-image-hover-effect`这个压缩包中的示例来深入...

jquery css3鼠标悬停图片放大显示效果代码: "jquery css3鼠标悬停图片放大显示效果代码"是一个典型的技术实现，它结合了JavaScript库jQuery和CSS3的强大功能，为用户创建了一个动态且吸引人的图片展示方式。当用户将鼠标悬停在图片上时，图片会自动放大，突出...

酷酷的jQuery鼠标悬停图片放大切换显示效果: 在"酷酷的jQuery鼠标悬停图片放大切换显示效果"中，我们主要关注两个关键点：鼠标悬停事件和图片切换与放大效果。 1. **鼠标悬停事件**：在jQuery中，`mouseenter` 和 `mouseleave` 事件用于监听鼠标进入和离开元素...

CSS3鼠标悬停图片放大效果特效.zip: 本资源“CSS3鼠标悬停图片放大效果特效.zip”聚焦于一个常见的用户界面特性，即当用户将鼠标悬停在图片上时，图片会放大以吸引用户的注意力。这种效果常见于产品展示、图片相册或任何需要强调特定图像的场景。首先...

仿百度空间JS鼠标悬停图片放大动画特效代码: 5. **图片放大**：在鼠标悬停事件触发后，`<img>`元素的宽度和高度会被动态地增加，模拟图片放大的效果。透明图片层可能也需要更新其内容为原图的放大版本，以实现平滑过渡。 6. **优化性能**：为了防止不必要的...

jquery实现鼠标悬停在图片上的放大效果: "jQuery鼠标悬停焦点图放大效果"是一种常见的增强用户视觉体验的技术，它使得用户在将鼠标光标移动到图片上时，图片会自动放大，突出显示细节，移开鼠标后则恢复原状。这种效果广泛应用于产品展示、图像画廊等场景，...

鼠标悬浮浮动放大 expand 效果: "鼠标悬浮浮動放大expand效果"指的是当用户将鼠标光标悬停在某个元素上时，该元素会自动放大或扩展，提供更清晰的细节视图。这种效果常用于图片、按钮、链接或其他需要突出显示的UI元素。【描述】: 这篇博文链接...

CSS3鼠标悬停图片放大效果，hover效果！: 实现图片悬停放大效果的核心在于CSS3的`:hover`伪类选择器。`:hover`用于选取鼠标指针浮动在其上的元素，配合transform属性，我们可以轻松实现图片的放大效果。以下是一个简单的示例： ```css img { transition: ...

css3鼠标悬停图片放大展示代码.zip: <!doctype html> <html> <head> ...meta charset="utf-8">...Css图片放大展示<... 一款简单的css3鼠标悬停图片放大展示代码，css3 transform属性制作鼠标悬停相册图片放大显示效果。

Global site tag (gtag.js) - Google Analytics