JavaScript鼠标经过图片加亮显示

最新推荐文章于 2021-06-06 16:25:56 发布
最新推荐文章于 2021-06-06 16:25:56 发布
阅读量2.2k 收藏
点赞数
分类专栏： HTML+CSS+JS 文章标签： javascript filter function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/musttieying/article/details/767694
版权
<!--将以下代码加入HTML的<Body></Body>之间-->

<SCRIPT language="JavaScript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>


<img src="image/flag.gif"
style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)"
onMouseOut="makevisible(this,1)">
musttieying
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js鼠标滑过展示图片效果
方寸间的博客
04-22 1644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
[js小技巧]鼠标移到图片高亮度显示
weixin_34367257的博客
06-21 592
关键代码： <styletype="text/css">.ComponentImage{}{cursor:hand;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0,FinishOpacity=75,Style=2,Enabled='false');}</style&g...
鼠标经过图片加亮显示
爱生活
12-07 1700
之间-->function makevisible(cur,which){if (which==0)cur.filters.alpha.opacity=100elsecur.filters.alpha.opacity=20}//--> 
js 实现 鼠标放到图片上会显示另外一张图片
03-31
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
css+js实现鼠标经过图片后,图片变背景图,显示新内容
12-27
css+js实现鼠标经过图片后,图片变背景图,显示新内容，css鼠标经过换内容，原先的内容隐藏或者作文背景。css鼠标经过内容切换的实现方法
jQuery鼠标经过图片变亮效果
05-01
"jQuery鼠标经过图片变亮效果"是一种常见的交互式设计，它可以使用户在鼠标悬停在图片上时，图片产生亮度变化，增强视觉反馈，吸引用户的注意力。这个效果是利用了jQuery库的事件监听和CSS样式修改功能来实现的。 ...
jQuery实现鼠标经过图片变亮其他变暗效果
10-24
在本例中，我们将探讨如何使用jQuery库来实现这个功能，即“鼠标经过图片变亮其他变暗”的效果。 首先，我们需要理解jQuery的基本用法。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及...
鼠标滑过图片显示文字图片变亮
10-14
在网页设计和用户体验优化中，"鼠标滑过图片显示文字图片变亮"是一种常见的交互效果。这个效果可以增强用户对内容的理解，提升用户的浏览体验。接下来，我们将详细探讨这一技术的实现方式、应用场景以及相关技术知识...
jquery鼠标经过时，图片突出显示
05-18
摘要:脚本资源,Ajax/JavaScript,图片换色　jquery鼠标经过图片突出显示，鼠标滑过图片时，对应图片变亮，其它图片变暗显示。把图片处理成GIF图片，会有更有意思的效果，不信你就试一试！
jQuery+CSS实现图片感应鼠标高亮显示当前图片
06-10
在网页设计中，提升用户体验是至关重要的，而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片，增强视觉效果，同时提供更直观的操作...
jquery hover事件鼠标悬停九宫格图片高亮显示代码
11-11
jquery hover事件鼠标悬停九宫格图片高亮显示代码
一个JS实现简单的鼠标滑过表格整行或者整列动态高亮显示效果.zip
11-22
一个JS实现简单的鼠标滑过表格整行或者整列动态高亮显示效果.zip
js鼠标经过 当前图片高亮显示,其他图片变灰色
爬楼梯的前端小白的博客
06-06 891
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高.
鼠标经过地方图片变亮，其他图片变暗效果 ，jq or css
ximo's blog
09-11 4834
效果的原理 原理其实很简单，首先给一个黑色的背景，通过降低图片的透明度，让黑色背景呈现出来，图片看起来就更暗。鼠标移到图片1，那么就让除了图片1的其他图片的透明度降低，让他们看起来更暗，让图片1看起来显得更亮 用两种方法来实现： CSS方法和JS方法 JS方法 效果实例 先看看HTML代码和CSS代码 HTML代码： 1 2 3 4 5
Java添加图片的悬浮提示,DIV+CSS鼠标经过悬停在图片上方显示图片文字
weixin_35112917的博客
03-16 1182
原始图片显示没有文字在上方，当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容。使用div css实现鼠标悬停图片上方时显示文字内容原理：首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象html a超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示超链接...
html在指定位置鼠标悬停显示出图片,简单实现鼠标悬停显示图片
热门推荐
weixin_28873283的博客
06-03 1万+
预览HTML部分展示位置${p.productImg}创建一个放图片的容器去掉当图片没有路径时默认的边框img[src=""],img:not([src]){opacity:0;}JavaScript部分/*** 显示图片详情，鼠标移入时执行*/function on(productImg) {if (productImg == "undefined" || productImg == null ...
鼠标经过图片变亮离开变暗的js特效代码
07-14 1753
鼠标经过图片变亮离开变暗的js特效代码，分别可css实现和jquery实现，兼容FF（鼠标特效代码,js图片变亮，js图片变暗,js特效代码） 更多的网页特效登录ab蓝学网下载 [注意]如转载,请注明本文链接：http://www.ablanxue.com/prone_995_1.html 在线预览 下载地址
鼠标经过图片显示文字
最新发布
05-29
您可以在HTML中使用鼠标悬停事件（onmouseover）和JavaScript来实现鼠标经过图片显示文字的效果。具体实现步骤如下： 1. 在HTML中插入图片和要显示的文字，可以使用HTML的<img>和<div>标签，给它们分别设置id和class属性。 2. 使用JavaScript编写函数，通过getElementById获取图片和文字的元素，然后利用style属性修改文字的display属性，使其在鼠标悬停时显示出来，离开时隐藏起来。 3. 在图片元素中绑定onmouseover事件，使其在鼠标悬停时触发JavaScript函数，显示对应的文字。 下面是一个示例代码： HTML部分： ``` <img id="myImg" src="myImage.jpg"> <div id="myText" class="hide">这是图片的说明文字</div> ``` CSS部分： ``` .hide { display: none; } ``` JavaScript部分： ``` var img = document.getElementById("myImg"); var text = document.getElementById("myText"); img.onmouseover = function() { text.style.display = "block"; } img.onmouseout = function() { text.style.display = "none"; } ``` 在这个示例中，我们首先定义了一个id为"myImg"的图片元素和一个class为"hide"的文字元素，使用CSS将文字元素的display属性设置为none，使其默认情况下不显示。 然后在JavaScript中获取图片和文字元素，定义onmouseover和onmouseout事件，当鼠标悬停在图片上时，将文字元素的display属性设置为block，使其显示出来；当鼠标离开图片时，将display属性设置为none，使其隐藏起来。 这样就可以实现鼠标经过图片显示文字的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值