为啥我的鼠标移出来的效果不显示。。。。。
任性不是罪
2016-07-25 19:47
window.onload = function(){
var box = document.getElementById('box') ;
box.onmouseover = function(){
play(1);
}
box.onmouseout = function(){
play(0.3);
}
}
var alpha = 0.3 ;
function play(target){
var timer = null ;
var box = document.getElementById('box') ;
clearInterval(timer);
timer = setInterval(function(){
var speed = 0 ;
if(alert > target){
speed = -0.1;
}else{
speed = 0.1 ;
}
if(alpha == target){
clearInterval(timer);
}else{
alpha = alpha + speed;
box.style.opacity = alpha;
}
},30);
}
就是看不出是哪里错了。。。。
4回答
-
- 脑阔疼
- 2016-07-25 20:31:15
window.onload = function() {
var box = document.getElementById('box');
box.onmouseover = function() {
play(1);
}
box.onmouseout = function() {
play(0.3);
}
}
var alpha = 0.3;
var timer = null;
function play(target) {
clearInterval(timer);
var box = document.getElementById('box');
var speed = 0;
timer = setInterval(function() {
if(alpha > target) {
speed = -0.01;
} else {
speed = 0.01;
}
if(alpha == target) {
clearInterval(timer);
} else {
alpha = alpha + speed;
box.style.opacity = alpha;
}
}, 3);
}
这个是我复制你的代码之后拉过去改的 测试可以 你对照下
-
- 脑阔疼
- 2016-07-25 20:36:07
window.onload = function() {
var box = document.getElementById('box');
box.onmouseover = function() {
play(100);
}
box.onmouseout = function() {
play(30);
}
var timer = null;//这俩货既不在上面的｛｝里
var alpha = 30;//也不在下面的｛｝里
function play(target) {
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha > target) {
speed = -10;
} else {
speed = 10;
}
if(alpha == target) {
clearInterval(timer);
} else {
alpha += speed;
box.style.opacity = alpha / 100;
}
}, 30);
}
}
-
- 任性不是罪
- 2016-07-25 20:28:31
window.onload = function(){
var box = document.getElementById('box') ;
var timer = null ;
box.onmouseover = function(){
play(100);
}
box.onmouseout = function(){
play(30);
}
function play(target){
var alpha = 30 ;
clearInterval(timer);
timer = setInterval(function(){
var speed = 0 ;
if(alpha > target){
speed = -10;
}else{
speed = 10 ;
}
if(alpha == target){
clearInterval(timer);
}else{
alpha += speed;
box.style.opacity = alpha/100;
}
},30);
}
}
-
- 脑阔疼
- 2016-07-25 20:23:31
第一：
if(alert > target){//这里应该是 alpha
speed = -0.1;
}else{
speed = 0.1 ;
}
第二：
function play(target){
var timer = null ;//这个变量应该声明在方法体外面。
var box = document.getElementById('box') ;
clearInterval(timer);
第三：
speed的绝对值为0.1 最后鼠标移出div可能会闪屏 建议缩小 然后同时缩小相应倍数计时器的间隔时间 达到效果不变
JS动画效果
113925 学习 · 1443 问题
相似问题