为什么链式触发不了，只变第一下，第二下变不了。
qq_慕粉6336518
2019-07-28 11:07
//获取对象属性
function getStyle(obj,attr){
if (obj.currentStyle) {
//兼容IE浏览器
return obj.surrentStyle[attr];
}else{
//谷歌或火狐
return getComputedStyle(obj,false)[attr];
}
}
var timer = null;
function startMove(obj,attr,end,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//获取当前对象属性值
var icur = 0;
//如果是透明度，则将结果四舍五入
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
//计算速度
var speed = (end-icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.icur == end){
clearInterval(obj.timer);
if (fn) {
fn();
}
}else{
if (attr == 'opacity') {
obj.style.filter = 'alpha:(opatity:'+icur+speed+')';//IE浏览器
obj.style.opacity = (icur+speed)/100;//谷歌或火狐
}else{
obj.style[attr] = icur+speed+'px';
}
}
},30)
}
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
</head>
<script type="text/javascript" src="startMove.js"></script>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#div1{
height: 200px;
width:200px;
position: relative;
left: -200px;
background: red;
}
#share{
position:absolute;
height: 50px;
width: 20px;
background: blue;
left: 200px;
top: 75px;
font-size: 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var onDiv = document.getElementById('div1');
onDiv.onmouseover = function(){
startMove(onDiv,'left',0,function(){
alert(1)
});
}
onDiv.onmouseout = function(){
startMove(onDiv,'left',-200);
}
}
</script>
<body>
<div id="div1">
<span id="share">啦啦啦</span>
</div>
</body>
</html>
2回答
-
- 半吊子渔者
- 2019-08-06 17:21:54
emmmmmmmmmm我找到问题出在哪了，但是却不知道为什么。你把if(obj.icur == end)中的obj.去掉就可以了
-
- 慕数据8129708
- 2019-08-02 14:52:33
复制 赤水三千的回答：
原问题地址：https://m.imooc.com/qadetail/214421
我猜是this的的作用域问题，onmouseover内的function函数应该把this传参，因为第二个function中的this不再指向op本身。相关的this 问题我也不太明白,正学习
应改为
op.onmouseover = function() {
var that = this //将this传参
yd(that, "height", 300, function() {
yd(that,"width",400); }）;
}
不知道对不对，共勉。
JS动画效果
113925 学习 · 1443 问题
相似问题