87,910
社区成员
发帖
与我相关
我的任务
分享js滤镜渐变问题
下面在代码在IE正常，但在非IE浏览器却出问题：当鼠标在移到层opacity到0.1时就停止不变了，在Firefox时用firebug却不显示错误，有人能帮看下是什么问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
<!--
window.onload=function(){
var obj=document.getElementById("test");
obj.onmouseover=function(){
highlight(this,100,10);
}
obj.onmouseout=function(){
clearTimeout(this.stop);
highlight(this,0,-10)
}
}
function highlight(obj,max,dis){
if (obj.stop) clearTimeout(obj.stop);
if (obj.filters){
if(obj.filters.alpha.opacity==max){
clearTimeout(obj.stop);
return;
}
} else {
if(obj.style.opacity==(max/100)){
clearTimeout(obj.stop);
return;
}
}
obj.filters?(obj.filters.alpha.opacity+=dis):(obj.style.opacity+=(dis/100));
obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
}
-->
</script>
</head>
<body>
<div style="border:1px solid #000;width:150px;height:100px;">
<div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:hand;"></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
不悲不喜 2008-11-23
- 打赏
- 举报
楼上两位都对，
obj.style.opacity是字符串类型，
强制转换的时候是被转换成了整数0。
另外，还可以这样作 。
obj.style.opacity是字符串类型，
强制转换的时候是被转换成了整数0。
另外，还可以这样作 。
obj.filters ? (obj.filters.alpha.opacity += dis) : (obj.style.opacity = Number(obj.style.opacity) + (dis / 100));
wangliangatleiden 2008-11-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
window.onload=function(){
var obj=document.getElementById("test");
obj.onmouseover=function(){
highlight(this,100,10);
}
obj.onmouseout=function(){
clearTimeout(this.stop);
highlight(this,0,-10)
}
}
function highlight(obj,max,dis){
if (obj.stop) clearTimeout(obj.stop);
if (obj.filters){
if(obj.filters.alpha.opacity==max){
clearTimeout(obj.stop);
return;
}
} else {
if(obj.style.opacity==(max/100)){
clearTimeout(obj.stop);
return;
}
}
obj.filters?(obj.filters.alpha.opacity+=dis):(obj.style.opacity=parseFloat(obj.style.opacity)+parseFloat(dis/100));//改的这句话
obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
}
</script>
</head>
<body>
<div style="border:1px solid #000;width:150px;height:100px;">
<div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:hand;"></div>
</div>
</body>
</html>
加点注释 :-)
wangliangatleiden 2008-11-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
window.onload=function(){
var obj=document.getElementById("test");
obj.onmouseover=function(){
highlight(this,100,10);
}
obj.onmouseout=function(){
clearTimeout(this.stop);
highlight(this,0,-10)
}
}
function highlight(obj,max,dis){
if (obj.stop) clearTimeout(obj.stop);
if (obj.filters){
if(obj.filters.alpha.opacity==max){
clearTimeout(obj.stop);
return;
}
} else {
if(obj.style.opacity==(max/100)){
clearTimeout(obj.stop);
return;
}
}
obj.filters?(obj.filters.alpha.opacity+=dis):(obj.style.opacity=parseFloat(obj.style.opacity)+parseFloat(dis/100));
obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
}
</script>
</head>
<body>
<div style="border:1px solid #000;width:150px;height:100px;">
<div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:hand;"></div>
</div>
</body>
</html>
试试吧,哈哈
neo_yoho 2008-11-23
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
<!--
window.onload=function(){
var obj=document.getElementById("test");
obj.onmouseover=function(){
highlight(this,100,10);
}
obj.onmouseout=function(){
clearTimeout(this.stop);
highlight(this,0,-10)
}
}
function highlight(obj,max,dis){
if (obj.stop) clearTimeout(obj.stop);
if (obj.filters){
if(obj.filters.alpha.opacity==max){
obj.filters.alpha.opacity=max;
clearTimeout(obj.stop);
return;
}
obj.filters.alpha.opacity+=dis;
} else {
if(obj.style.opacity==(max/100)){
clearTimeout(obj.stop);
return;
}
obj.style.opacity=(obj.style.opacity*100+dis)/100;
}
obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
}
-->
</script>
</head>
<body>
<div style="border:1px solid #000;width:150px;height:100px;">
<div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:point;"></div>
</div>
</body>
</html>
