仅从代码来看是没问题的。但影响程序运行的因素是多方面的，没看到你完整的代码（包括js和html），不好妄下定论，仅仅猜测一下：你说运行到调整透明度的语句就不再往下运行了，那么原因估计是两个：一是left和right这两个id在页面上不存在（或者存在一个以上）；二是浏览器不支持opacity。你可以在出错的地方测试一下：
consolelog(documentgetElementById("left"));
consolelog(documentgetElementById("left")styleopacity);
只要看哪个显示的是undefined，就知道是哪个出问题了。
其实你按F12打开开发者界面，看一下红字提示应该就知道什么原因了啊？不会用吗？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>旋转图标</title>
<style>
#box>img{
top:30px;
position:absolute;
width:100px;
height:100px;
}
</style>
<script>
windowonload = function() {
var oDiv = documentgetElementById("box");
var oImg = oDivgetElementsByTagName("img")[0];
oDivonmouseover = function() {
startMove(oImg, {
top: -170,
opacity: 30
}, function() {
oImgstyletop = 30 + "px";
startMove(oImg, {
opacity: 100,
top: 25
});
});
}
}
function startMove(obj, json, fnEnd) {
//在最上面清除即可。。。
clearInterval(objtimer);
var timer = null;
var alpha = 100;
objtimer = setInterval(function() {
for (attr in json) {
var key = true;
//获取当前值
var icur;
if ("opacity" == attr) {
icur = Mathround(parseFloat(getstyle(obj, attr)) 100);
} else {
icur = parseInt(getstyle(obj, attr));
}
//改变速度
var speed = (json[attr] - icur) / 10;
speed = speed > 0 Mathceil(speed) : Mathfloor(speed);
//检测当前值
if (json[attr] !== icur) {
key = false;
}
if ("opacity" == attr) {
objstylefilter = "alpha(opacity:" + (speed + icur) + ")";
objstyleopacity = (speed + icur) / 100;
} else {
objstyle[attr] = (speed + icur) + "px";
}
if (key) {
clearInterval(objtimer);
if (typeof fnEnd == "function") {
fnEnd();
}
}
}
}, 30);
}
function getstyle(obj, attr) {
return getComputedStyle getComputedStyle(obj, false)[attr] : objcurrentStyle[attr];
}
</script>
</head>
<body>
<div id="box">
<img src="/img/7jpg" />
</div>
</body>
</html>
这个机制有问题，毕竟在FF下那个click事件是模拟的，file的值通过模拟click事件获取的文件不能提交，也不能传给其他函数，因此就算你通过某种强力手法输入了file的指，也不见得能顺利提交
如果你实在想点击那个file，试试引入一下jquery，它已经帮你做了很多事情，你可以直接用click()的方式来触发事件，兼容性jquery已经帮你做得很好了，不过我没有去尝试，即便是click成功也不保证可以正确提交表单
你可以尝试一下另外的思路，网上流传一种方法是模拟定位，然后让file透明来自定义file表单域的
<script>
function fclick(obj){
with(obj){
styleposTop=eventsrcElementoffsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
styleposLeft=eventx-offsetWidth/2 //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围
}
}
</script>
或者精确X：
<script>
function fclick(obj){
with(obj){
styleposTop=eventsrcElementoffsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
var x=eventx-offsetWidth/2
if(x<eventsrcElementoffsetLeft)x=eventsrcElementoffsetLeft
if(x>eventsrcElementoffsetLeft+eventsrcElementoffsetWidth-offsetWidth)x=eventsrcElementoffsetLeft+eventsrcElementoffsetWidth-offsetWidth
styleposLeft=x }
}
</script>
file也要做隐藏处理
<input type="file" name="picpath" id="picpath" style="position:absolute;filter:alpha(opacity=0);width:30px;" onChange="documentformenpathvalue=thisvalue" hidefocus=“hidefocus”>
大概原理就这样，调试兼容性是很麻烦的事情，不好意思我暂时没时间一步一步去验证，你按照这个思路再试试
一、RGB颜色函数
1、rgb($red,$green,$blue): 根据红、绿、蓝三个值创建一个颜色
2、rgba($red,$green,$blue,$alpha): 根据红、绿、蓝和透明度值创建一个颜色
3、red($color): 从一个颜色中获取其中红色值
4、green($color): 从一个颜色中获取其中绿色值
5、blue($color): 从一个颜色中获取其中蓝色值
6、mix($color-1,$color-2,[$weight]): 把两种颜色混合起来
二、HSL函数
1、hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色
2、hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色
3、saturation($color)：从一个颜色中获取饱和度（saturation）值
4、lightness($color)：从一个颜色中获取亮度（lightness）值
5、adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色
6、lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色
7、darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色
三、Opacity函数
1、alpha($color)/opacity($color): 获取颜色透明度值
2、rgba($color,$alpha): 改变颜色的透明度
3、opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明
4、transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明
以上就是关于Javascript如何改变透明度全部的内容，包括:Javascript如何改变透明度、js编写代码链式运动的时候为什么同一个函数不能调用两次、怎样让firefoxd出alert框等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）