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 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- git commit 多行注释方法说明
为了提高项目质量,不仅仅是代码的质量,而且还包括代码管理的质量. 所以,详细的git commit message 必不可少. 现在记录一下git commit 多行详细的commit 信息. 首先, ...
- R语言两种方式求指定日期所在月的天数
R语言两种方式求指定日期所在月的天数 days_monthday<-function(date){ m<-format(date,format="%m& ...
- java web中读取properties文件时的路径问题
在web开发时,难免会有一些固定的参数,我们一般把这些固定的参数存在properties文件中,然后用的时候要读出来.但经常出现一些错误,找不到相应的路径,所以,今天特地讲一些如何正确获得路径. 首先 ...
- 纯CSS实现圆角、可拖动的一个DIV模块层
<style>body{ margin:0px; padding:0px; font-size:14px;}#t { position:absolute; float:left; left ...
- [Cxf] spring-cxf 配置
1.在web.xml中配置servlet <!-- spring监听的配置 --> <listener> <listener-class>org.springfra ...
- variable `xxx' has initializer but incomplete type
错误:variable `xxx' has initializer but incomplete type 原因:xxx对应的类型没有找到,只把xxx声明了但是没给出定义.编译器无从确认你调用的构造函 ...
- 3D MAX 人物骨骼建设
3DMax方面所涉及的专业知识: (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设: ...
- gsoap简介
gSoap是什么? 请进 官方网站 http://genivia.com/index.html 这里更直接 http://www.cs.fsu.edu/~engelen/soap.html 英语水平很 ...
- linux -- ubuntu 通过命令行，设置文件及其子文件的权限
想一次修改某个目录下所有文件的权限,包括子目录中的文件权限也要修改,要使用参数-R表示启动递归处理. 例如: [root@localhost ~]# chmod 777 /home/user 注:仅把 ...
- MVC下载远程文件流(WebClient)
public ActionResult DownLoad_File() { return File(ScLiu(PathUrl), "application/octet-stream&quo ...