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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
浅析return false的正确使用
Nov 04 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
用javascript实现倒计时效果
Feb 09 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表单转换textarea换行符的方法
2010/09/10 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
js简单的弹出框有关闭按钮
2014/05/05 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python五子棋游戏的设计与实现
2019/06/18 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
文明礼仪小标兵事迹
2014/01/12 职场文书
新领导上任欢迎词
2014/01/13 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
2015年度物流工作总结
2015/04/30 职场文书
初中团支书竞选稿
2015/11/21 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
mysql中整数数据类型tinyint详解
2021/12/06 MySQL