javascript实现右侧弹出“分享到”窗口效果


Posted in Javascript onFebruary 01, 2016

本文实例讲解了javascript实现右侧弹出“分享到”窗口的详细代码,分享给大家供大家参考,具体内容如下

效果图:

javascript实现右侧弹出“分享到”窗口效果

具体代码:

<html>
<head>
<meta charset="gb2312">
<title></title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}

#div1 {
width: 100px;
height: 150px;
background-color: #1B6D85;
left:-100px;
position: absolute;
}

#div1 span {
width: 20px;
height: 100px;
line-height: 30px;
background-color:#1B6D85;
left:100px;
top:20px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv1 = document.getElementById('div1');
oDiv1.timer = null;
oDiv1.onmouseover = function() {
startMove(this, 0);
};
oDiv1.onmouseout = function() {
startMove(this, -100);
};
};
window.onscroll = function () {
var oDiv1 = document.getElementById('div1');
var ioffsetMiddle = document.documentElement.scrollTop || document.body.scrollTop;
ioffsetMiddle = ioffsetMiddle + (document.documentElement.clientHeight - oDiv1.offsetHeight) / 2;
//防止有小数,导致一直跳动
ioffsetMiddle = parseInt(ioffsetMiddle);
startMiddle(oDiv1, ioffsetMiddle);
};
function startMiddle(obj, iTarget) {
clearInterval(obj.timerMiddle);
obj.timerMiddle = setInterval(function () {
var speed = (iTarget - obj.offsetTop) / 8;
//如果大于零就取上,小于零就取下
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
document.getElementById('input1').value = iTarget + '-' + (obj.offsetTop + speed);
if (obj.offsetTop == iTarget) {
clearInterval(obj.timerMiddle);
} else {
obj.style.top = obj.offsetTop + speed + 'px';
}
}, 10);
}
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (iTarget - obj.offsetLeft) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetLeft == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 10);
}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="input1"/>
<div id="div1">
<span>
分享到
</span>
</div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
Bootstrap基础学习
Jun 16 Javascript
Jquery ajax基础教程
Nov 20 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 #Javascript
jQuery 3.0 的变化及使用方法
Feb 01 #Javascript
You might like
基于PHP CURL用法的深入分析
2013/06/09 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php图片裁剪函数
2018/10/31 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
Javascript 解疑
2009/11/11 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
Python中format()格式输出全解
2019/04/12 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python pip配置国内源的方法
2020/02/14 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
python 实现Harris角点检测算法
2020/12/11 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
总裁助理岗位职责
2014/02/17 职场文书
产品开发计划书
2014/04/27 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android