缓冲运动的应用—分享到_列举三个运动中缓冲动作的应用-CSDN博客

本文链接：https://blog.csdn.net/smileshang1224/article/details/103039333

缓冲运动的应用—分享到

鼠标移动到分享上，左边的div就会显示出来。移开会自己恢复。
思路：
样式中初始的left是-150 这样div就是缩在里面，给0 就会显示出来。那么我们只要变动这个值就可以了。
startMove 中的参数 iTarget 是目标点，表示到哪个目标点会停下来。
控制speed 的大小就能控制运动的快慢。如果达到目标点就停止定时器。

规律：

假设

    left:30           iTarget:300     得出    往右  为正

    left:600         iTarget:50       得出    往左  为负

通过当前位置left 与目标点的关系 iTarget 推断出速度的正负

注意：
一上来就要关了定时器，因为是每次移动到分享到，都会开个定时器，
开的越多相对来说速度就越快，因为同时会有多个定时器执行。
所以每次要保证一个定时器工作。

分享到的代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>分享到</title>
    <style>
        li {
            list-style: none;
        }

        #div1 {
            width: 150px;
            height: 200px;
            background: royalblue;
            position: absolute;
            /* 初始时出去的状态 */
            left: -150px;
        }

        #div1 span {
            position: absolute;
            width: 30px;
            height: 90px;
            line-height: 30px;
            background: #ccc;
            right: -30px;
            top: 60px;
            text-align: center;
        }

        #div1 ul li {
            color: #fff;
        }
    </style>
    <script>

        window.onload = function () {
            var oDiv = document.getElementById('div1');
            // 鼠标进入。样式中初始的left是-150 这样div就是缩在里面，给0 oDiv就会显示出来。那么我们只要变动这个值就可以了。直接给它加是因为span、ul都在它里面；若给span加点击到li时候它又回去了
            oDiv.onmouseover = function () {
                startMove(0);
            };
            // 鼠标离开隐藏
            oDiv.onmouseout = function () {
                startMove(-150);
            };
        };
        // 计时器
        var timer;
        // startMove 中的参数 iTarget 是目标点 ，表示到哪个目标点会停下来。
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');
            // 函数防抖；保证多次点击时同一时间只有一个定时器响应一上来就要关了定时器，因为是每次移动到分享到，
            // 都会开个定时器，开的越多相对来说速度就越快，因为同时会有多个定时器执行。所以每次要保证一个定时器工作。
            clearInterval(timer);
            timer = setInterval(function () {
                // 控制speed 的大小 就能控制运动的快慢
                var speed = 0;
                // 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负
                if (oDiv.offsetLeft > iTarget) {
                    speed = -10;
                }
                else {
                    speed = 10;
                }

                if (oDiv.offsetLeft == iTarget) {
                    // 当元素的offsetLeft超出一定距离或到达一个边界值后，停止计时器
                    clearInterval(timer);
                }
                else {
                    // 让页面中的oDiv元素的left值，每30毫秒，在自身left的基础上增加10像素
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            }, 30);
        }
    </script>
</head>

<body>
    <div id="div1">
        <span>分享到</span>
        <ul>
            <li>QQ</li>
            <li>微信</li>
            <li>微博</li>
            <li>贴吧</li>
        </ul>
    </div>
</body>

</html>

封装运动的写法

move的封装代码
注意:运动函数封装好以后,使用过程中,要注意想实现的效果和要操作的属性
注意:自己封装的运动函数只能操作尺寸类属性：width,height,left,top,margin,padding

function move(ele,data,cb){
	clearInterval(ele.t)
	ele.t = setInterval(function(){
		var onoff = true;
		for(var i in data){
			var iNow = parseInt(getStyle(ele,i));
			var speed = (data[i] - iNow)/10;
			speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
			if(iNow != data[i]){
				onoff = false;
			}
			ele.style[i] = iNow + speed + "px";
		}
		if(onoff){
			clearInterval(ele.t);
			cb && cb();
		}
	},30)
}

//获取样式的功能
function getStyle(ele,attr){
	if(getComputedStyle){
		return getComputedStyle(ele,false)[attr];
	}else{
		return ele.currentStyle[attr];
	}
}

分享到的代码区域

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		li {
			list-style: none;
		}

		.box {
			width: 200px;
			height: 300px;
			position: absolute;
			left: -200px;
			top: 100px;
			background: #ccc;
		}

		.box span {
			position: absolute;
			width: 30px;
			background: #ccc;
			font-size: 20px;
			right: -30px;
			top: 70px;
			text-align: center;
		}
	</style>
</head>

<body>
	<!-- 使用h1标签撑开区域 -->
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<h1>一级标题</h1>
	<div class="box">
		<span>分享到</span>
		<ul>
			<li>QQ</li>
			<li>贴吧</li>
			<li>微信</li>
			<li>朋友圈</li>
		</ul>
	</div>
</body>
<script src="../../move.js"></script>
<script type="text/javascript">

	var obox = document.querySelector(".box");

	obox.onmouseover = function () {
		// 直接调用move操作obox，操作它的left属性使其left为0
		move(obox, { left: 0 })
	}
	obox.onmouseout = function () {
		move(obox, { left: -200 })
	}

	// 滚动的时候跟着走
	// 初始的top变量
	var t = obox.offsetTop;
	// window的滚动事件
	onscroll = function () {
		// 滚动的时候实时获取滚动的距离
		var scrollT = document.documentElement.scrollTop;
		// 没有运动固定定位
		// obox.style.top = t + scrollT + "px";
		// 取整为了防止抖动
		var target = parseInt(t + scrollT);
		// 直接调用move操作obox，操作它的top属性，target是top的值
		move(obox, { top: target })
	}
</script>

</html>