我的鏈式動畫這么沒有反應
<!DOCTYPE html>
<html>
?<head>
??<meta charset="UTF-8">
??<title></title>
??
??<style>
???#li1{width: 200px;height: 100px;opacity: 0.3;background :brown;}
??</style>
??<!--<script type="text/javascript" src="js/move1.js" ></script>-->
??
?</head>
?<body>
??<div id="li1">???
??</div>?????
?<script src="js/lianshi.js"></script>
?<script type="text/javascript">
??window.onload=function(){
???var ll=document.getElementById('li1');
???ll.onmouseover=function(){
???????????? starMove(ll,'width',600,function(){
???????????? ?starMove(ll,'height',400,function(){
???????????? ??starMove(ll,'opacity',100);
???????????? ?});
???????????? });
???};
???ll.onmouseout=function(){
????starMove(ll,'opacity',30,function(){
?????starMove(ll,'height',100,function(){
??????starMove(ll,'width',200);
?????});
????});
???};
??};
?</script>
?</body>
</html>
?
//封裝一個獲取樣式的方法
function getStyle(obj, attr) {
?if (obj.currentStyle) {
??return obj.currentStyle[attr];
?} else {
??return getComputedStyle(obj, false)[attr];
?}
}
function starMove(obj, json, fn) {
? //假設
? var flag = null
?clearInterval(obj.timer);
?obj.timer = setInterval(function() {
??//假設所有動作都已完成成立
??for (var attr in json) {
???//取當前值
???var icur = 0;
???if (attr == 'opacity') {//判斷傳入參數是否為透明度
????icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
???} else {
????icur = parseInt(getStyle(obj, attr))
???}
???//算速度
???var spend = (json[attr] - icur) / 8;
???spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
???//檢測停止
???if (icur != json[attr]) {
????flag = false;
???}else{
????flag = true
???}
???if (attr == 'opacity') {
????obj.style.filter = "alpha(opacity:'+(icur+spend)+')";
????obj.style.opacity = (icur + spend) / 100;
???} else {
????obj.style[attr] = icur + spend + 'px';
???}
??}
??if (flag) {
???clearInterval(obj.timer)
???if (fn) {
????fn();
???}
??}
?}, 30)
}
?
?
2016-10-19
沒有細看。但是感覺應該是{“opacity”，"30"}這個樣子。