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 前台切换网站的样式实现
Jun 22 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python中的随机函数小结
2018/01/27 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
骨干教师培训方案
2014/05/06 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
担保书范本
2015/01/20 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript