16-js-缓冲运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 600px;
top: 50px;
}
#div2 {
width: 1px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
background-color: black;
}
</style>
<script>
function startMove() {
var oDiv = document.getElementById(\'div1\');
setInterval(function () {
var speed = (300 - oDiv.offsetLeft) / 10;
//speed = Math.ceil(speed);//向上取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断是否大于0, 向上or向下取整;
oDiv.style.left = oDiv.offsetLeft + speed + \'px\';
document.title = oDiv.offsetLeft + \',\' + speed;
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
16-js-缓冲运动的更多相关文章
- JS缓冲运动案例:右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例:右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js实现缓冲运动,和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
随机推荐
- Apache配置rewrite
最近将代码做了迁移,更换了web服务器,从原来的Nginx,换成使用Apache,多少有些区别.这里整理一下在apache下实现rewrite功能. 第一部分:修改apache配置文件支持rewrit ...
- C 产生随机码 (输入数字来产生)
#include <stdio.h> #include <stdlib.h> main() { unsigned int seed; /*申明初始化器的种子,注意是unsign ...
- JavaWeb学习笔记--跳转方法小结
服务端跳转:1. RequestDispatcher.forward() public void doGet(HttpServletRequest request, HttpServletRespo ...
- 用js实现两个select下拉框之间的元素互相移动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- IOS 动画专题 --iOS核心动画
iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看 ...
- 在 Windows 下部署 Go 语言环境
http://bbs.chinaunix.net/thread-4088281-1-1.html 1. 首先下载官方二进制安装包:32 位选择 windows-386.msi64 位选择 window ...
- NOI2013 UOJ122 向量内积
神题...... 还是大神讲得比较清晰~orz http://dffxtz.logdown.com/posts/197950-noi2013-vector-inner-product 启发题:poj3 ...
- cf492B Vanya and Lanterns
B. Vanya and Lanterns time limit per test 1 second memory limit per test 256 megabytes input standar ...
- n%i之和
题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1168 题意:给定一个n,注意这里n小于10^12,求 分析:早些时 ...
- javascript笔记6之函数
/* function box() { //函数的声明 alert('我只有被调用才可以执行!'); //函数本身没有运行功能 } //必须调用才可以执行 box(); //调用 function b ...