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 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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实现读取和编写XML DOM代码
2010/04/07 PHP
php学习之运算符相关概念
2011/06/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
简单JS代码压缩器
2006/10/12 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
js实现移动端轮播图
2020/12/21 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python字典排序的方法
2019/10/12 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
《童趣》教学反思
2014/02/19 职场文书
诚信考试倡议书
2014/04/15 职场文书
合同协议书格式
2014/04/18 职场文书
客户答谢会活动方案
2014/08/31 职场文书
收款委托书范本
2014/09/11 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
2014年城管工作总结
2014/11/20 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL