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 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- 文件服务器和web应用分离的思路(转)
目前在做一个应用,有不同的客户端,包括web应用的客户端,其他的客户端,都要访问我的文件服务器,通过文件服务程序提供的服务来访问文件,但是对文件管理服务器这个应用,没有什么思路,请大家给点思路,谢谢: ...
- link_to和其对应要跳转的的url，用path和直接路由方法
link_to和其对应要跳转的的url,用path和直接路由方法 看看link_to <% @order.each do |oo| %> <div> <%= oo.nam ...
- Java 获取webapp，Root，classpath，项目等路径工具类
public class UtilPath { public static void main(String[] args) { String systemName = System.getPrope ...
- jQuery方法笔记
.clone() $(selector).clone(includeEvents) $(this).clone(true) //boolean值,true/false分别对饮是否复制元素的所有事件处理
- 在 C++ 程序中只使用 const 常量而不使用宏常量
在 C++ 程序中只使用 const 常量而不使用宏常量,即 const 常量完 全取代宏常量. #include <iostream> /* run this program using ...
- 平时收集的一些有关UED的团队和个人博客(转)
UCDChina导航 前端团队 阿里巴巴 UED -- 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着. 阿里巴巴中国站UED -- 阿里巴巴中国站UED成立于1999年, ...
- 【Java面试题】51 什么时候用assert。
assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制. 在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保 ...
- jQuery-处理元素内容、表单元素
处理元素内容 1.text方法 使用说明: 1)不传参数 得到jQuery对象内所有元素及其后代元素的文本内容 2)传入用于设置匹配元素的文本内容 3)传入function 使用函数来设置jQuery ...
- _mysql_exceptions.ProgrammingError:(2014, "commands out of sync; you can't run this command now")
今天,测试dashboard上的一些graph, 发现,当多个graph同时向后台请求数据(异步)的时候, 出现了上述错误.而且,三个bug交替出现,另外两个bug分别是:python stop re ...
- 百度地图api ak值
http://api.map.baidu.com/geocoder/v2/?ak=859d16285fd000feec89e9032513f8bb&callback=renderReverse ...