网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
JS实现简单的缓慢动画
作者:
新玄
/ 发布于
2018-3-22
/
26
css样式 <style> body{ margin: 0px; padding: 0px; } div{ width: 400px; height: 400px; background-color: #ccc; position: absolute; } </style> js代码 <button>向右移动</button> <button>向左移动</button> <div></div> <script> var btn1=document.getElementsByTagName('button')[0]; var btn2=document.getElementsByTagName('button')[1]; var div=document.getElementsByTagName('div')[0]; btn1.addEventListener('click',function(){ clearInterval(div.timer); div.timer=setInterval(function(){ if (div.offsetLeft>=400) { clearInterval(div.timer); }else{ var step=Math.ceil((400-div.offsetLeft)/10); div.style.left=div.offsetLeft+step+"px"; } },15) }) btn2.addEventListener('click',function(){ clearInterval(div.timer); div.timer=setInterval(function(){ if (div.offsetLeft<=0) { clearInterval(div.timer); } else { var step=Math.floor((0-div.offsetLeft)/10); // console.log(step); div.style.left=div.offsetLeft+step+"px"; console.log(2); } },15) }) </script>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
.
验证手机号、密码、短信验证码
.
JS 写Cookie
.
/* JS 弹出新窗口全屏 */
.
/* 字符串截取方法 */
.
/* 获取当前点击事件的Object对象 */
.
/* 获得当前浏览器JS的版本 */
.
获取url中的参数
.
手机类型判断
.
计算两个日期之前的天数(工作日),排除节假日和周末
.
替换字符串一些部分为星号达到保密效果
可能有用的
.
验证手机号、密码、短信验证码
.
JS 写Cookie
.
/* JS 弹出新窗口全屏 */
.
/* 字符串截取方法 */
.
/* 获取当前点击事件的Object对象 */
.
/* 获得当前浏览器JS的版本 */
.
获取url中的参数
.
手机类型判断
.
计算两个日期之前的天数(工作日),排除节假日和周末
.
替换字符串一些部分为星号达到保密效果
新玄
贡献的其它代码
(
12
)
.
JS实现简单的缓慢动画
.
修改字段允许为空
.
阳历转农历
.
统计文本中某个字符串出现的次数
.
实现简单的 Ping 的功能,用于测试网络是否已经联通
.
Jquery-使元素居屏幕中间位置
.
jQuery小技巧-隐藏搜索文本框文字
.
调用系统里默认的邮件客户端
.
所在城市的简单注册
.
用html构造来代替Gridview
地图
本站
我们
服务
版权
联系
回馈
博客