动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。

具体实现:

1.假设我们要操作的图片放置在一个id="imgbox"的div容器中。如下面的代码:

<div id="imgbox" style="width:700px;margin:auto;"><img src="/images/logof.gif"></div>

2.首先,在css中增加两个类定义,为了避免影响到其它图片,最好是用选择限定符加以限定。如下代码:

#imgbox img.low{-moz-opacity:0.5;filter:alpha(opacity=50);cursor:hand;}
#imgbox img.high{-moz-opacity:1;filter:alpha(opacity=100);cursor:hand;}

3.然后在网页的<head>区域增加JavaScript,JavaScript将在页面载入完成之后,为我们指定的图片添加半透明效果和鼠标事件:

<script language="JavaScript" type="text/javascript">
window.onload = function() {
 var imgNode = document.getElementById("imgbox").getElementsByTagName("img")[0];
 imgNode.setAttribute("class","low");
 imgNode.className = "low";
 imgNode.onmouseover = function(){
  this.setAttribute("class","high");
  this.className = "high";
 }
 imgNode.onmouseout = function(){
  this.setAttribute("class","low");
  this.className = "low";
 }
}
</script>

补充说明:

在上面的JavaScript中,设置图片的class属性的时候,同时使用了两种方式:

imgNode.setAttribute("class","low");
imgNode.className = "low";

第一种方式是针对IE以外的浏览器,按理说设置class属性对所有的浏览器都是有效的。但是IE比较有个性,它通过元素的className来定义class属性。这是IE不符合规范的地方,但是我们不得不考虑到IE占据的广大市场。所以,同时使用两种方式,从而达到跨浏览器兼容的效果。

适合多图片调用的修改

当时做的时候是针对单张图片的情况做的。如果要用于调用的多图片,可以把JS代码做如下修改:

<script language="JavaScript" type="text/javascript">
window.onload = function() {
    var imgNodes = document.getElementById("imgbox").getElementsByTagName("img");
    for (var i=0; i<imgNodes.length; i++ ){
        var imgNode = imgNodes;
        imgNode.setAttribute("class","low");
        imgNode.className = "low";
        imgNode.onmouseover = function(){
            this.setAttribute("class","high");
            this.className = "high";
        }
        imgNode.onmouseout = function(){
            this.setAttribute("class","low");
            this.className = "low";
        }
    }
}
</script>

再做改进:改为当图片加载完毕就产生效果:

首先定义函数:

<script language="JavaScript" type="text/javascript">
function transpic() {
    var imgNodes = document.getElementById("imgbox").getElementsByTagName("img");
    for (var i=0; i<imgNodes.length; i++ ){
        var imgNode = imgNodes;
        imgNode.setAttribute("class","low");
        imgNode.className = "low";
        imgNode.onmouseover = function(){
            this.setAttribute("class","high");
            this.className = "high";
        }
        imgNode.onmouseout = function(){
            this.setAttribute("class","low");
            this.className = "low";
        }
    }
}
</script>

然后在图片调用代码的后面调用此函数(例如):

<div id="imgbox" style="width:700px;margin:auto;"><img src="/images/logof.gif"></div>
<script type="text/javascript" language="JavaScript">transpic();</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

37250
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

13440
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

14340
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

21670
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

7120
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

1K10
来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

12230
来自专栏小古哥的博客园

Vue入门

一、引入vue 方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入 <script src="https://unpkg...

40180
来自专栏hightopo

基于 HTML5 Canvas 的属性值点击出现多选项的制作

14720
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

12620

扫码关注云+社区

领取腾讯云代金券