-
- weixin_精慕门4485437 2020-08-22
- q123
-
截图0赞 · 0采集
-
- qq_慕雪6274093 2020-07-05
<html> <head> <style> div{ width:200px; height;200px background-color:red; opacity:.3; } </style> </head> <body> <div> </div> <script> var adiv=document.querSelector("div"); adiv.onmouseover=function(){ startMove(100); } adiv.onmouseout=function(){ startMove(30); } var time=null; var opacitys=30; function startMove(Itarge){ clearServeteval(time); var adiv=document.querSeletor('div'); time=setInterval(function(){ var seep=0; if( opacitys>Itarget) seep=-10; else seep=10; if(opacitys==Itarge){ clearSetInterval(time); } else{ opacitys+=seep; adiv.style.opacity=opactys/100; } },100) } </script> </body> </html>- 0赞 · 0采集
-
- weixin_慕后端6529359 2020-05-26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height:200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
starmove(100);
}
oDiv.onmouseout = function() {
starmove(30);
}
}
var timer = null;
var alpha = 30;
function move(iTarget) {
var alpha = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha < iTarget) {
speed = 10;
}
else {
speed = -10;
}
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>- 0赞 · 0采集
-
- xiaowan321 2019-08-19
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}
-
截图0赞 · 0采集
-
- little慕慕 2019-08-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background: red;
/* filter:alpha(opacity=30); */
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(100);
}
oDiv.onmouseout = function() {
move(30);
}
}
var timer = null;
var opa = 30;
function move(target) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(opa < target) {
speed = 10;
}
else {
speed = -10;
}
if(opa == target){
clearInterval(timer);
}
else{
opa += speed;
// oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = opa/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>
- 0赞 · 0采集
-
- qq_心安有个你_0 2019-07-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
filter: alpha(opcity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(100);
}
oDiv.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(alpha>iTarget){
speed=-10;
}
else{
speed=10;
}
if(alpha==iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter='alpha(opactiy:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
});
}
</script>
</html>- 0赞 · 0采集
-
- weixin_慕函数6093326 2019-01-17
- fliter标签
-
截图0赞 · 0采集
-
- weixin_慕函数6093326 2019-01-17
- fliter标签
-
截图0赞 · 0采集
-
- 慕粉2308425049 2018-07-17
ele.offsetXX 只有宽高左右
filter：alpha（opacity：30）；css中透明度30
opacity：0.3
ele.style.fiter = 'alpha(opactiy:'+alpha + 速度+')';
ele.style.opacity = (alpha+速度)/100;
- 0赞 · 0采集
-
- 贝壳壳 2018-04-12
1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100)
2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed）
3、IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）
- 3赞 · 2采集
-
- 刀不磨要生锈 2018-04-10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变透明度</title>
<style type="text/css">
#div1{
width:160px;
height:160px;
background-color:red;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}
var timer = null;
var alpha = 30;
function startMove(target){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha > target){
speed = -10;
}else{
speed = 10;
}
if(alpha == target){
claerInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
}
}
</script>
</head>
<body>
<div id=div1></div>
</body>
</html>
- 1赞 · 0采集
-
- Rolla 2018-03-06
- filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。
- 0赞 · 0采集
-
- lck493 2018-01-29
- <!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }
- 0赞 · 1采集
-
- 取经者 2017-12-06
- speed为负其实代表的不是移动速度，而是要减去的px
-
截图0赞 · 0采集
-
- 取经者 2017-12-06
- speed为负其实代表的不是移动速度，而是要减去的px
-
截图0赞 · 0采集
-
- Yeah___ 2017-12-01
- 如果不想重复运动,在函数执行前清除定时器clearInterval()
- 0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- var timer=null; var alpha=30;
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 2课 body{margin:0; padding:0;} div{width:200px; height:200px; background:#f00; filter:opacity(30); opacity:0.3; } window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(100); } odiv.onmouseout=function(){ move(30); } } function move(target){ odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-10; }else{ speed=10; } if(alpha==target){ clearInterval(timer); }else{ alpha += speed; odiv.style.filter="alpha(opacity:"+alpha+")"; odiv.style.opacity=alpha/100; } },500) };
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- var alpha = 30;通过比较和target的值，通过speed步长累加来赋值给opacity来改变透明度
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 连贯：
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 第二部 ：
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 第一步：
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-01
- 对比上节课代码
-
截图0赞 · 0采集
-
- hwan 2017-10-30
- 透明度css代码
-
截图0赞 · 0采集
-
- _不知不知_ 2017-10-11
- 为什么要新定义一个alpha存储透明度，而不直接用oDiv.style.filter或oDiv.style.opacity与目标判断： style对象只能获取通过HTML标签的style特性定义的样式，对于opacity特性是定义在<style>内嵌标签内的样式，odiv.style.opacity=" "结果为空。
- 0赞 · 0采集
-
- qq_与陌Dance_0 2017-08-17
- <!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。 <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(100); } oDiv.onmouseout = function() { startMove(30); } } var alpha = 30; var timer = null; function startMove(target) { var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function() { var speed = 0; if (alpha > target) { speed = -10; } else if (alpha < target) { speed = 10; } if (alpha == target) { clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity' + alpha + ')'; oDiv.style.opacity = alpha / 100; } }, 30) } </script>
- 0赞 · 0采集
-
- 碎碎念o_o4253196 2017-08-16
- <!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】
- 0赞 · 0采集
-
- qq_云在飘_04040030 2017-05-16
- <!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。
-
截图1赞 · 1采集
-
- 慕粉1441139954 2017-05-16
- window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(100);} oDiv.onmouseout = function(){ startMove(30);} var timer=null; function startMove(iTarget){ var oDiv = document.getElementById('div'); clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetAlpha == iTarget },30)
- 0赞 · 0采集
-
- Clptt4359805 2017-04-27
- <!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】
- 1赞 · 2采集
