js运动 分享到
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>未命题</title>
<style>
*{margin: 0;
padding: 0;
}
#div1{
height: 200px;
width: 150px;
background: red;
position:absolute;
top:50px;
left: -150px;
}
#div2{
height: 50px;
width: 20px;
background: black;
color: white;
position:absolute;
top:100px;
right:-20px;
line-height: 25px;
cursor: pointer;
}
</style>
<script>
window.onload = function ()
{
odiv1 = document.getElementById('div1');
odiv2 = document.getElementById('div2');
var timer = null; odiv1.onmouseover= function ()
{
ToMove(div1,0,10);
} odiv1.onmouseout = function ()
{
ToMove(div1,-150,-10);
} function ToMove (obj,goal,speed)
{
clearInterval(timer);
timer = setInterval(function(){
if(obj.offsetLeft == goal)
{
clearInterval(timer);
}
else
{
obj.style.left = obj.offsetLeft + speed + 'px';
}
},30);
}
}
</script>
</head>
<body> <div id="div1"><div id="div2">分享</div></div> </body> </html>
js运动 分享到的更多相关文章
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 解析JS运动
解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- JS微信分享不好写？来封装一下
微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...
- 关于js运动的一些总结
js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...
- JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
随机推荐
- Hibernate配置文件和映射元素解释
象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素. AD:干货来了,不要等!WOT20 ...
- poj3683 Priest John's Busiest Day
2-SAT 输出可行解 找可行解的方案就是: 根据第一次建的图建一个反图..然后求逆拓扑排序,建反图的原因是保持冲突的两个事件肯定会被染成不同的颜色 求逆拓扑排序的原因也是为了对图染的色不会发生冲突, ...
- 函数lock_rec_add_to_queue
在原来的type_mode基础上,加上LOCK_REC /*********************************************************************// ...
- Qt之透明提示框
简述 经常使用企鹅的小伙伴一定对登录失败的提示框很熟悉,主要涉及窗口透明并添加图标.提示信息.关闭按钮的显示等. 我们可以利用QWidget创建一个提示框,然后通过样式设置我们想要的效果. 简述 效果 ...
- HDU 1317 XYZZY【Bellman_Ford判断正环】
题意:给出n个房间,初始在房间1有100的能量值,每次进入一个房间,能量值可能增加也可能减小,(是点权,不是边权),问能否到达终点的时候能量值还为正 这题自己写的时候wa--wa-- 后来看了题解,还 ...
- HDU 1728 逃离迷宫【BFS】
题意:给出一个起点,一个终点,规定的转弯次数,问能否在规定的转弯次数内到达终点--- 这一题是学(看)习(题)的(解)@_@ 主要学了两个地方 一个是剪枝,如果搜到的当前点的转弯次数小于该点turn数 ...
- Android隐藏虚拟按键，关闭开机动画、开机声音
/*********************************************************************** * Android隐藏虚拟按键,关闭开机动画.开机声音 ...
- 07day1
怒跪了. 砍树 排序 [问题描述] 小 A 在一条水平的马路上种了 n 棵树,过了几年树都长得很高大了,每棵树都可以看作是一条长度为 a[i]的竖线段.由于有的树过于高大,挡住了其他的树,使得另一 ...
- 【转】DB2 常用命令
1. 打开命令行窗口 #db2cmd 2. 打开控制中心 # db2cmd db2cc 3. 打开命令编辑器 db2cmd db2ce =====操作数据库命令===== 4. 启动数据库实例 ...
- 在Android中使用并发来提高速度和性能
Android框架提供了很实用的异步处理类.然而它们中的大多数在一个单一的后台线程中排队.当你需要多个线程时你是怎么做的? 众所周知,UI更新发生在UI线程(也称为主线程).在主线程中的任何操作都会阻 ...