Did not talk much, we started-it-yourself package with more than one object moving frame buffer sports bar. The frame has a powerful, with a function js moving objects can be achieved, transparency, width of change in height. It can be used for image carousel player.
To simplify the code reading time for everyone to see, I put the main function of the functional logic to explain in words again.
-
getStyle (obj, name) function
getStyle (obj, name) in order to obtain the function value of the current element css used, such as the value of the label div element of height and width.
and a name for the parameter obj, obj is the object label element, name tags for the current value of css element. // Example: obj: div elements; name: css div element attribute name.
For compatibility with the magic of the IE browser, we need to use currentStyle () method to get css property of the label elements. -
remove () function is the core of a multi-frame movement of the object.
remove (obj, attr, iTarget) function has three parameters, obj label element, attr css attributes as tag element, iTarget target is a moving object. -
Before the campaign began, the need to clean up once the timer to turn off, to do so in order to avoid the emergence of multiple timers simultaneously. clearInterval (obj.timer); // first stopped the timer
-
Set the timer, the timer wrapped in a function, the function is completed in all of this function in vivo.
-
Setting the initial value of the object itself curr, velocity provided the initial value of the object is calculated reasons.
-
Because of the different browsers, transparency, opacity of the object is a special attribute that, in order to allow a different browser compatible display, requires special determination curr = Math.round (parseFloat (getStyle (obj, attr)) * 100)
-
Next is the moving speed of the object is calculated: var speed = (iTarget - curr ) / 6; with the current position of the object -curr Itarget target value, divided by a value, for adjusting the speed of the object moving speed.
Positive and negative values of the object velocity determination operation is performed three head. -
The final step, the object to be moved the final value, with the speed of the current calculated value + itself. And speed values are themselves with the movement of the continuous dynamic change , (speed + curr).
-
Paste the following examples and detailed a picture of the code.
- Detailed code, be sure to look resolve the above oh.
function getStyle(obj, name) {
//例：obj:div元素；name:div元素的css属性名称
//currentStyle和getComputedStyle：获取当前元素所使用的css属性值
if (obj.currentStyle) {
//IE浏览器
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name]; //Chrome浏览器
}
}
var timer = null;
function remove(obj, attr, iTarget) {
//obj:(html如：div) attr:obj的css属性， iTarget:目标值
clearInterval(obj.timer); //先停掉定时器
obj.timer = setInterval(() => {
var curr = 0; //物体自身高度
if (attr == "opacity") {
curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
//parseFloat为适应透明度
} else {
curr = parseInt(getStyle(obj, attr));
//移动的宽，高度等,相当于offsetHight
}
var speed = (iTarget - curr) / 6; //物体移动速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//Math.ceil():向上取整，取最大的；Math.floor():向下取整，取最小的
if (curr == iTarget) {
clearInterval(obj.timer);
} else {
if (attr == "opacity") {
//为适应透明度
obj.style.filter = "alpha(opacity:" + (speed + curr) + ")";
obj.style.opacity = (curr + speed) / 100;
} else {
obj.style[attr] = curr + speed + "px";
}
}
}, 30);
}
- Html code picture above, cited in html remove.js this multi-frame movement of the object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多物体运动框架</title>
<script src="remove.js"></script>
</head>
<body>
<button onclick="sport()">点击运动</button>
<div class="speed" id="play"></div>
</body>
<script>
var play = document.getElementById("play");
function sport() {
remove(play, "left", 200);
play.onmousemove = function() {
remove(play, "opacity", 100);
};
}
</script>
<style>
.speed {
width: 100px;
height: 100px;
background: red;
margin: 20px;
position: absolute;
left: 0;
opacity: 0.6;
}
</style>
</html>
~~*完结，觉得文章对你有帮助或者写的还不错，记得关注点赞评论哟*~~
