為什么鏈式觸發不了,只變第一下,第二下變不了。
//獲取對象屬性
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>
2019-08-06
emmmmmmmmmm我找到問題出在哪了,但是卻不知道為什么。你把if(obj.icur == end)中的obj.去掉就可以了
2019-08-02
復制 赤水三千的回答:
原問題地址: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); });
}
不知道對不對,共勉。