求助这段JS代码怎么简化,实现鼠标经过图片时透明度为1,离开时透明度为0.5

求助这段JS代码怎么简化,实现鼠标经过图片时透明度为1,离开时透明度为0.5,第1张

楼上那个也可以。

下面说的是纯JS 如果你很多会比上面的方便

1将所用变量 弄成一个数组,

var yiguitu1;

var myarry=[];

for(var i=0;i<n;i++){

    var j=yiguitu1+i;

    myarrypush(j);

};

2将你需要的事件做成for循环

foreach(m in myarry){

    monmouseover=function(m){

        mstyleopacity=1;

    }

    monmouseout=function(m){

        mstyleopacity=05;

    }

}

//淡入效果(含淡入到指定透明度)    

function fadeIn(elem, speed, opacity){    

/    

 参数说明    

 elem==>需要淡入的元素    

 speed==>淡入速度,正整数(可选)    

 opacity==>淡入到指定的透明度,0~100(可选)    

/    

   speed = speed || 20;    

   opacity = opacity || 100;    

//显示元素,并将元素值为0透明度(不可见)    

   elemstyledisplay = 'block';    

   iBaseSetOpacity(elem, 0);    

//初始化透明度变化值为0    

   var val = 0;    

//循环将透明值以5递增,即淡入效果    

   (function(){    

       iBaseSetOpacity(elem, val);    

       val += 5;    

       if (val <= opacity) {    

           setTimeout(argumentscallee, speed)    

       }    

   })();    

}    

    

//淡出效果(含淡出到指定透明度)    

function fadeOut(elem, speed, opacity){    

/    

 参数说明    

 elem==>需要淡入的元素    

 speed==>淡入速度,正整数(可选)    

 opacity==>淡入到指定的透明度,0~100(可选)    

/    

   speed = speed || 20;    

   opacity = opacity || 0;    

   //初始化透明度变化值为0    

   var val = 100;    

//循环将透明值以5递减,即淡出效果    

   (function(){    

       iBaseSetOpacity(elem, val);    

       val -= 5;    

       if (val >= opacity) {    

           setTimeout(argumentscallee, speed);    

       }else if (val < 0) {    

//元素透明度为0后隐藏元素    

           elemstyledisplay = 'none';    

       }    

   })();    

}    

var btns = documentgetElementById('demo');    

       

   btnsonclick = function(){    

       fadeIn(btns);    

   }    

   btnsonclick = function(){    

       fadeOut(btns,40);    

   }    

   

   <p id="demo" style="width:300px;height:300px;background:#f00;">淡入淡出</p>

试试吧

你应该是靠透明度值的设置来实现淡入淡出的效果吧 这样来写可以兼容IE和Firefox, Chrome等浏览器:

function setOpacity (o, n) {

if (typeof (n) == "string") {

n = eval(n);

}

if (ostyleopacity != null) {

ostyleopacity = n <= 1 n : n / 1000;

}

else if (ostylemozOpacity != null) {

ostylemozOpacity = n <= 1 n : n / 1000;

}

else {

ostylefilter = "alpha(opacity=" + (n <= 1 n 1000 : n) + ")";

}

}

参数o为要设置透明度的页面元素对象, n为透明度的值

/

  @see 鼠标点击拖拽的效果(页面可以同时拖动多个框)

  @param boxId 整个对象(框)的id(一般为div或table)

  @param event 内置对象(必须传入)

 /

function mousePlead1(event, boxId) {

    var o = getO(boxId);

    var isIE = documentall  true : false;

    var e = event;

    var x = eoffsetX || elayerX;

    var y = eoffsetY || elayerY;

    documentonmousemove = function(e) {

        ostylefilter = 'Alpha(opacity=70)';

        ostyleopacity = '07';

        if (isIE) {

            osetCapture();

        } else {

            windowcaptureEvents(EventMOUSEMOVE);

        }

        var e = windowevent || e;

        if (eclientX - x >= 0 && eclientY - y >= 0 && eclientX - x <= getWinSize()[0] - getO(boxId)offsetWidth

                && eclientY - y <= getWinSize()[1] - getO(boxId)offsetHeight) {

            ostyleleft = (eclientX - x) + "px";

            ostyletop = (eclientY - y) + "px";

        }

    };

    documentonmouseup = function(e) {

        documentonmousemove = function() {

        };

        if (isIE) {

            oreleaseCapture();

        } else {

            windowreleaseEvents(oMOUSEMOVE);

        }

        ostylefilter = "";

        ostyleopacity = "";

    };

}

 

/

 @see 获得对象

 @param id 对象的id(表单元素和其他标签都可以)

 @return Object

/

function getO(id) {

    return documentgetElementById(id);

}

 

/

  @see 获得当前窗体的大小(width,height)

  @return Array 

 /

function getWinSize() {

    var width = parseInt(documentdocumentElementclientWidth);

    var height = parseInt(documentdocumentElementclientHeight);

    return new Array(width, height);

}

documentgetelementbytagname("a")style="color:#ffffff;background-color:#ffffff;"以上代码就是把a元素的样式(color为字体颜色,background-color为背景颜色)都设置为白色,如果底色为其他颜色设置为你所使用的底色就达到了去除颜色的效果。

当然也可以这样:

documentgetelementbytagname("a")style="opacity:0;";这样就是将a元素设置为透明,那也达到了所谓的去除所有颜色。

以上就是关于求助这段JS代码怎么简化,实现鼠标经过图片时透明度为1,离开时透明度为0.5全部的内容,包括:求助这段JS代码怎么简化,实现鼠标经过图片时透明度为1,离开时透明度为0.5、JS改变图片透明度、js报错:错误: 无法获取未定义或 null 引用的属性“alpha”等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9727173.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存