javascript 运动缓冲效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
#box{
    width:100px;
    height:100px;
    background:orange;
    position: absolute;
    left:0;
}
</style>
<body>

    <div id="box"></div>

</body>
</html>
<script>

var oBox = document.getElementById(‘box‘);
var num = 0 , speed;

oBox.onclick = function(){
    setInterval(function(){
        speed = Math.ceil( 0.1*(1000-num) );
        num = num + speed;
        oBox.style.left = num+‘px‘;
    },10);
}

</script>
时间: 2024-10-27 10:20:21

javascript 运动缓冲效果的相关文章

javascript运动详解

javascript运动详解 本文给大家详细介绍下如何使用javascript来实现运动效果,总结的十分全面,附上各种效果的详细示例和演示图,有需要的小伙伴可以参考下. 物体运动原理:通过改变物体的位置,而发生移动变化. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,

转 JavaScript 运动框架 Step by step

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后 一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. [javascript] view plain copy window.onload = function(){ var oBtn = document.getElemen

原生JavaScript运动功能系列(五):定时定点运动

原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaScript运动功能系列(四):多物体多值链式运动 这篇博客剖析一个问题,就是怎么实现将元素指定时间运动到目标位置?前面的博客都是在处理运动行为,没有对运动时间做任何限定,只是因为清晰的分析运动行为和实现原理,要想一个动画函数具备健全的功能,并且可以随意使用,通过参数设定动画执行时间是非常有必要的一个

自动播放——幻灯片缓冲效果&amp;&amp;带Loading效果的图片切换&amp;&amp;移动效果(按轨迹移动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery实现图片和视频缓冲效果插件

jquery实现图片和视频缓冲效果插件: 创建一个动画效果的缓冲样式插件,插件可以开始.暂停.结束等功能,代码来源于网络希望对网络有所帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <titl

js+css实现带缓冲效果右键弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

javascript运动系列第一篇——运动函数

× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体 前面的话 除了拖拽以外,运动也是javascript动画的一个基本操作.通过CSS属性transition和animation可以实现运动.但是,要进行更精细地操作,javascript运动是必不可少的.本文将详细介绍javascript运动 简单运动 让一个元素在页面中运动起来很简单,设置定时器,改变定位元素的left或top值即可 <button id="btn&

左上角带缓冲效果跟随屏幕移动的图片

<html> <head> <title>左上角带缓冲效果跟随屏幕移动的图片-<a target=_blank href="http://www.caopingzhixiao.com/">河北草坪</a></title> <style type="text/css"> #floater { position: absolute; left: 500; top: 146; width:

JS+CSS打造的仿惠惠网带缓冲效果的图片滚动

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造的仿惠惠网带缓冲效果的图片滚动丨上谷战国红|亿诚</title> <style>* {margin:0;paddin