js运动：分享到
定时器及运动函数的使用。
<!--
Author: XiaoWen
Create a file: 2016-12-14 09:41:11
Last modified: 2016-12-14 10:11:53
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享到</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
position: fixed;
top: 40px;
left: -100px;
background: #ccc;
}
#box .share{
width: 20px;
height: 60px;
background: #f00;
position: absolute;
right: -20px;
top: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="share">分享到</div>
</div>
<script>
var box=document.getElementById("box");
var share=box.getElementsByClassName("share")[0];
box.onmouseover=function(){
move(box,'left',0)
}
box.onmouseout=function(){
move(box,'left',-100)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
var timer=null;
function move(obj,attr,iTarget){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;
speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(iTarget==parseInt(getStyle(obj,attr))){
clearInterval(obj.timer);
}else{
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
}
},10)
}
</script>
</body>
</html>
js运动：分享到的更多相关文章
- js运动 分享到
<!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...
- 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 ...
随机推荐
- Ruby-调用windows窗体
发现SharpDevelop 也支持Ruby ,特别是可以直接把winform的控件直接用在 require "mscorlib" require "System.Win ...
- Centos上DNS服务器的简单搭建
1:安装软件包 yum -y install bind bind-chroot bind-utils bind-libs 2:修改配置文件 1): vim /etc/named.conf 2):在主 ...
- 千人基因组计划数据库下载某段区域SNP
进入http://browser.1000genomes.org/index.html网站 假定要寻找“6:133098746-133108745”这段距离的SNP数据,“6”表示6号染色体,后面的数 ...
- linux下查找某文件关键字
-e表示罗列出与关键字有关的行,“ABC”表示查找的关键字,/XXX/4.assoc.linear表示该路径下的文件 .assoc.linear
- [DB]MariaDB 与 MySql 数据库
目前 MariaDB 已经出来几年了,本文编辑时的官网最新稳定版本是 10.1.14 链接:https://downloads.mariadb.org/ 但百度没有下载,搜狗给的下载版本是 5.5.2 ...
- 基于weka的文本分类实现
weka介绍 参见 1)百度百科:http://baike.baidu.com/link?url=V9GKiFxiAoFkaUvPULJ7gK_xoEDnSfUNR1woed0YTmo20Wjo0wY ...
- java核心知识点学习----重点学习线程池ThreadPool
线程池是多线程学习中需要重点掌握的. 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统交互.在这种情形下,使用线程池可以很好的提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考 ...
- 深入理解JVM内存模型
1.程序计数器在虚拟机的概念模型里字节码解释器工作时就是通过改变 这个计数器的值来选取下一条需要执行的字节码指令,分支.循环.跳转.异常处理. Java 虚拟机的多线程是通过线程轮流切换并分配处理器执 ...
- coreseek实战(一)：windows下coreseek的安装与测试
coreseek实战(一):windows下coreseek的安装与测试 网上关于 coreseek 在 windows 下安装与使用的教程有很多,官方也有详细的教程,这里我也只是按着官方提供的教程详 ...
- C++矩阵运算库armadillo配置笔记
前言 最近在用C++实现神经网络模型,优化算法需要用到矩阵操作,一开始我用的是boost的ublas库,但用着用着感觉很不习惯,接口不够友好.于是上网搜索矩阵运算哪家强,大神们都推荐armadillo ...