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 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- Android——单例模式
详细的各种模式 http://mobile.51cto.com/android-419145.htm http://wenku.baidu.com/link?url=f3yjQ6YvslvHcWJLb ...
- 电快速脉冲群EFT（概念）
电快速瞬变脉冲群 简称EFT(Electrical Fast Transient)是指脉冲群有特定的持续时间(规定为15mS),特定的脉冲周期(300mS)的脉冲, 脉冲群中的单个脉冲有特定的重复周期 ...
- js - html中跳转出frame框架
echo '<script>alert("密码修改成功,请重新登录!");window.parent.location.href = "'.site_url( ...
- 用 CSS 实现打印显示底色
上一篇有讲到如何在浏览器端实现打印功能.后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色.网上的方法主要有以下几种实现方式: 1.把背景颜色写成行内样式,如下图所示: 但是发现这样 ...
- 关于SQL语句的一些注意事项
1.Into 表后要编辑-IntelliSense-刷新本地缓存 才能访问新表 2.Is null不是=null
- 解决App can’t be opened because it is from an unidentified developer
关闭设置 打开终端 输入sudo spctl --master-disable
- 比較JS合并数组的各种方法及其优劣
原文链接: Combining JS Arrays原文日期: 2014-09-09翻译日期: 2014-09-18翻译人员: 铁锚 本文属于JavaScript的基础技能. 我们将学习结合/合并两个 ...
- MyEclipse安装EGit插件方法
摘要: 先了解自己的MyEclipse是基于哪个版本的Eclipse优化的,然后到EGit网站找对应的EGit版本,下载压缩包,解压安装. 在网上看到有人说并不是任意版本的EGit插件都能适配你的My ...
- 字符串池化 python
前言 在 Python 中经常通过内存池化技术来提高其性能,那么问题来了,在什么情况下会池化呢? 让我们通过几个例子进行一下理解一下. 预备知识 在查看例子之前,首先要提 python 中的一个函数 ...
- Hyperic-Sigar简介
Hyperic-Sigar是一个收集系统各项底层信息的工具集.他有如下特点:1. 收集信息全面收集CPU,MEM,NETWORK,PROCESS,IOSTAT等使用Sigar,你完全可以模仿出cpui ...