手风琴效果

最新推荐文章于 2022-12-16 20:15:36 发布

端脑

最新推荐文章于 2022-12-16 20:15:36 发布

阅读量141

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103546236

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

手风琴效果

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        
        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        
        div ul {
            width: 1300px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script src="sport2.js"></script>
<script type="text/javascript">
    var lis = document.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
        lis[i].onmouseover = function() {
            for (var j = 0; j < lis.length; j++) {
                startMove(lis[j], 100, "width");
            }
            startMove(this, 800, "width");
        }
        lis[i].onmouseout = function() {
            // 所有li全部变为默认宽度
            for (var j = 0; j < lis.length; j++) {
                startMove(lis[j], 240, "width");
            }
        }
    }
</script>

sport.js

//缓冲--多物体
//obj  要操作的元素
//target  目标值
//attr  要操作的属性
//callback 回调函数
function startMove(obj,target,attr,callback){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var current = 0;
		if( attr == "opacity" ){
			current = parseFloat( getStyle(obj,attr) ) * 100;
		}else{
			current =parseInt( getStyle(obj,attr) ) ;
		}
		var speed = (target-current)/10;
		speed = speed>0?Math.ceil(speed) : Math.floor(speed);
		if( current == target ){
			clearInterval(obj.timer);
			//上一个动作完成 进入到下一个动作
			if( callback ){
				callback(); 
			}
		}else{
			if( attr == "opacity" ){
				
				obj.style[attr] = (current + speed) / 100;
			}else{
				obj.style[attr] = current + speed + "px";
			}
		}
	},30)
}
function getStyle(obj,attr){
	if( window.getComputedStyle ){
		return window.getComputedStyle(obj,false)[attr];
	}else{
		return obj.currentStyle[attr];
	}
}

sport2.js

/**
 * 
 * @param obj 运动的元素
 * @param target 目标值 
 * @param attr 操作属性 
 * @param callback 回调函数
 */
function startMove(obj,target,attr,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if (attr === "opacity") {
            speed = target - current > 0 ? 0.1: -0.1;
        } else {
            speed = (target - current)/10; //    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        }
            //  
        if (current === target) {
            clearInterval(obj.timer);
            // 上一个动作执行完 进入下一个动作
            if (callback) {
              callback();
            }
        } else {
            if (attr === "opacity") {
                obj.style[attr] = current + speed
            } else {
               obj.style[attr] = current + speed + "px";
            }   
        }
    },20);
}


function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj,false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

附加图片

自己需要找5张图片进行测试

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手风琴效果

手风琴效果<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none }...
复制链接

扫一扫

专栏目录