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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
js对象基础实例分析
Jan 13 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
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
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python开发游戏的前期准备
2019/05/05 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
大学生演讲稿范文
2014/01/11 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
个人四风问题整改措施
2014/10/24 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
详解Mysql 函数调用优化
2021/04/07 MySQL