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 日期控件datepicker属性详细解析
Nov 08 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
微信小程序的线程架构【推荐】
May 14 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
微信小程序用canvas画图并分享
Mar 09 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php error_log 函数的使用
2009/04/13 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
简单的js表格操作
2016/09/24 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
js实现仿购物车加减效果
2017/03/01 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python运行DLL文件的方法
2020/01/17 Python
简约控的天堂:The Undone
2016/12/21 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
爱情保证书范文
2014/02/01 职场文书
工作分析计划书
2014/04/30 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年环保局工作总结
2015/05/22 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
golang操作rocketmq的示例代码
2022/04/06 Golang