为了账号安全,请及时绑定邮箱和手机立即绑定

透明度动画(类淘宝划过图片效果),鼠标划过、划出图片透明度不改变

透明度动画(类淘宝划过图片效果),鼠标划过、划出图片透明度不改变

wubin_work 2017-03-25 17:00:35
会出现如图情况,鼠标移入颜色变浅,但是划过另外一个图片时候 原先的图片不回复,请问原因?所用图片在最后<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>透明度动画应用</title>    <style>    *{margin: 0;padding: 0;}    ul{list-style: none;}    img{border: 0;}    #imgbox{width:664px;margin: 50px auto;}    #imgbox ul li{overflow: hidden;border: 1px solid #B7B5B5;}    #imgbox ul li:first-child{margin-bottom: -1px;}    #imgbox ul li a{float: left;text-decoration: none;padding: 10px;}    .ablr{border-width: 0px 1px 0px 1px;border-style: solid;border-color: #B7B5B5;}    </style></head><body>    <div id="imgbox">        <ul>            <li>                <a href="#"><img src="1.jpg"></a>                <a href="#"><img src="2.jpg"></a>                <a href="#"><img src="3.jpg"></a>            </li>            <li>                <a href="#"><img src="4.jpg"></a>                <a href="#"><img src="5.jpg"></a>                <a href="#"><img src="6.jpg"></a>            </li>        </ul>    </div>    <script src="jsopacity.js"></script></body></html>jsopacity.jswindow.onload=function(){    var box=document.getElementById('imgbox'),        img=box.getElementsByTagName('img');    for(var i=0;i<img.length;i++){        img[i].onmouseover=function(){            startchange(50,this)        };        img[i].onmouseout=function(){            startchange(100,this)        };    }}var timer=null,    alpha=100;function startchange(iTarget,that){    clearInterval(timer);    timer=setInterval(function(){        var speed=0;        if (alpha>iTarget) {            speed=-10;        } else{            speed=10;        }        if (alpha==iTarget) {            clearInterval(timer);        }else{            alpha+=speed;            that.style.filter='alpha(opacity:'+alpha+')';            that.style.opacity=alpha/100;        }    },30);}
查看完整描述

1 回答

?
习惯受伤

TA贡献885条经验 获得超1144个赞

Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。所以你代码中filter那个值改一下试试
查看完整回答
反对 回复 2017-03-26
  • 1 回答
  • 2 关注
  • 1189 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信