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 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- hive输出json字符串
目前没发现有什么方便的函数可以直接使用,只能使用concat来手工拼接. 注意将null的字段值转为空,使用nvl函数 如果将hql语句写在script.q文件里面如下: select concat( ...
- UVA 11019 Matrix Matcher 矩阵匹配器 AC自动机 二维文本串查找二维模式串
链接:https://vjudge.net/problem/UVA-11019lrjP218 matrix matcher #include<bits/stdc++.h> using na ...
- Jquery实现仿腾讯微薄的广播发表
前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...
- ADT Android Development Tools
ADT(Android Development Tools)在Eclipse编译IDE环境中,需安装ADT(Android Developer Tools)Plug-in,这是Android在Ecli ...
- 第二百九十五节，python操作redis缓存-字符串类型
python操作redis缓存-字符串类型 首先要安装redis-py模块 python连接redis方式,有两种连接方式,一种是直接连接,一张是通过连接池连接 注意:以后我们都用的连接池方式连接,直 ...
- yuv420图文详解
YUV格式有两大类:planar和packed.对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y,U ...
- 类加载器详解 （转至http://blog.csdn.net/jiangwei0910410003/article/details/17733153）
首先来了解一下字节码和class文件的区别: 我们知道,新建一个java对象的时候,JVM要将这个对象对应的字节码加载到内存中,这个字节码的原始信息存放在classpath(就是我们新建Java工程的 ...
- R语言低级绘图函数-title
title 函数用来在一张图表上添加标题 基本用法: main 表示主标题,通常位于图像的上方, sub 表示副标题,位于图像的下方, xlab 表示x轴的标签,ylab 表示y轴的标签 par(om ...
- 最短路径问题-Floyd算法
概念 最短路径也是图的一个应用,即寻找图中某两个顶点的最短路径长度. 实际应用:例如确定某两个城市间的坐火车最短行车路线长度等. Floyd algorithm 中文名就是弗洛伊德算法. 算法思路:用 ...
- js 补零方法，如果不足位数
var pad = function() { var tbl = []; return function(num, n) { var len = n-num.toString().length; if ...