JS：“分享到”之类的悬浮框的运动原理（代码）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>只传一个参数</title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: chartreuse;
margin-top: 50px;
position: absolute;
left: -100px;
top: 0;
cursor: pointer;
}
.div span{
display: block;
width: 20px;
height: 50px;
position: absolute;
right: -20px;
top: 50%;
margin-top: -25px;
background-color: coral;
font-size: 10px;
padding: 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div');
oDiv.onmouseover = function(){
start(0);
};
oDiv.onmouseout = function(){
start(-100);
};
};
var timer = null;
//功能一抹一样的函数，参数越少越好。
function start(iTarget) {
var oDiv = document.getElementById('div');
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft>iTarget){
speed = -10;
}else{
speed = 10;
};
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} }, 30)
};
</script>
</head> <body>
<div class="div" id="div"><span>分享到</span></div>
</body> </html>
学习路径与来源：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS：“分享到”之类的悬浮框的运动原理（代码）的更多相关文章
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- （41）JS运动之右側中间悬浮框（对联悬浮框）
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- u-boot bootz 加载kernel 流程分析
u-boot 加载 kernel 的流程分析. image重要结构体头文件 // include/image.h * * Legacy and FIT format headers used by d ...
- IPC介绍——10个ipcs例子
IPC介绍——10个ipcs例子 semaphorearrays2010performancesystemaccess ipcs是一个uinx/linux的命令.用于报告系统的消息队列.信号量.共享内 ...
- CSS样式表——布局练习（制作360网页）
以制作360网页为例(只做到了静态网页) 提纲:1.总共分为7部分 悬浮窗: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- hadoop 1.1.2和 hive 0.10 和hbase 0.94.9整合
今天弄了一下hive0.10和hbase0.94.9整合,需要设置的并不多,但是也遇到了一些问题. 1.复制jar包 拷贝hbase-0.94.9.jar,zookeeper-3.4.5.jar,pr ...
- 关于PHP开发所需要的工具和环境
0.notepad++ 一个类型记事本的软件,用来看安装的部署说明命令. 1.虚拟机 在虚拟机里面操作,本机不会被影响. 2.CentOS系统 类似Linux的系统,在里面安装PHP,Nginx,ph ...
- windows下安装TA-Lib库
步骤一: https://sourceforge.net/projects/ta-lib/files/ta-lib/0.4.0/ta-lib-0.4.0-msvc.zip/download?use_m ...
- 在C语言中实现面向对象（2）
C语言是结构化和模块化的语言,它是面向过程的.但它也可以模拟C++实现面向对象的功能.那么什么是对象呢?对象就是一个包含数据以及于这些数据有关的操作的集合,也就是包含数据成员和操作代码(即成员函数). ...
- Javascript农历与公历相互转换
/**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_Y ...
- bedtools 的安装与使用
1) 安装 bedtools 提供了3种安装方式 从google code 下载源代码进行安装 利用系统中的包管理工具进行安装, 比如cnetos 下的yum, ubuntu下的apt-get, ma ...
- rdesktop连接远程windows
$ info rdesktop //看一下帮助信息吧$rdesktop 192.168.1.1 //打开了一个8位色彩的,$rdesktop -a 16 192.168.1.1 //这个是16位色 ...