JS实现侧悬浮浮动实例代码


Posted in Javascript onNovember 29, 2013

效果:

JS实现侧悬浮浮动实例代码

思路:

首先,加载onscroll控制滚动条。然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点。最后将其参数返回。再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数。

代码:

<head runat="server">
    <title></title>
    <style type="text/css">
        #div1
        {
            width: 200px;
            height: 200px;
            background: #0000FF;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script type="text/javascript">
        window.onscroll = function () {
            var oDiv = document.getElementById('div1');
            var DivScroll = document.documentElement.scrollTop || document.body.scrollTop;      //获取移动高度
            //                        oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
            move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll));    //调用传参,其中里面的参数是DIV要走的终点。也就是(可视高度-DIV高度)/2+移动高度
        };
        var timer = null;
        function move(end) {
            clearInterval(timer);       //首先,先关闭之前如果有开启的setInterval;
            timer = setInterval(function () {       
                var oDiv = document.getElementById('div1');
                var speed = (end - oDiv.offsetTop) / 5;     //计算DIV要走的速度,DIV要走的速度就等于(终点-offsetTop高度)/缩放系数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);       //为了避免小数,将其取整
                if (oDiv.offsetTop == end) {        //当DIV到达终点,则关闭setInterval;
                    clearInterval(timer);
                }
                else {
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';     //移动div
                }
            }, 30);
        }
    </script>
</head>
<body style="height: 1000px;">
    <div id="div1">
    </div>
</body>
Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
Node.js模块加载详解
Aug 16 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Position属性之relative用法
Dec 14 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
原生js生成图片验证码
Oct 11 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 #Javascript
JS实现日期加减的方法
Nov 29 #Javascript
js弹出层永远居中实现思路及代码
Nov 29 #Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 #Javascript
JS取文本框中最小值的简单实例
Nov 29 #Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 #Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 #Javascript
You might like
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
javascript图片预加载完整实例
2015/12/10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python中使用SAX解析xml实例
2014/11/21 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python版大富翁源代码分享
2018/11/19 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python命令行参数用法实例分析
2019/06/25 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
如何真正的了解python装饰器
2020/08/14 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
保险专业大学生职业规划书
2014/03/03 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
我的中国梦主题班会
2015/08/14 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
Mysql中mvcc各场景理解应用
2022/08/05 MySQL