实现效果如下

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>悬浮窗口</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="scrollDiv.js"></script>

</head>

<body>

    <img src="http://images2015.cnblogs.com/blog/791149/201606/791149-20160628145810171-905306109.jpg" style="width:1920px;height1200px;">

</body>

</html>

Javascript实现代码scrollDiv.js

var scrollTimeTask = null ;

$(function(){

    //设置和添加元素

    var scrollDiv = $('<div id="scalingToolBar"></div>');

    scrollDiv.css({

        position : 'absolute',

        top : $(window).height()/2,

        right : 0,

        backgroundColor : "rgba(255,255,255,0)",    //RGB方式设置透明度，最后一个参数为透明值,0为透明,1为不透明

        width : 50 ,

        height : 140 ,

        zIndex : 300                                //z轴的高度,css中是z-index : 300 ,在JS中卫zIndex，不能有'-',其他属性也是这样，并且是驼峰格式

    });

    //浮动工具栏的图片两个

    var btnAdd = $('<img id="imgAdd" src="http://images2015.cnblogs.com/blog/791149/201606/791149-20160628153237656-1111147584.png">');

    var btnSub = $('<img id="imgSub" src="http://images2015.cnblogs.com/blog/791149/201606/791149-20160628153312843-756980358.png">');

    var btnCss = {

        marginTop : 10,

        marginBottom : 10,

        cursor: 'pointer'    //设置指针为手的形状

    };

    btnAdd.css(btnCss);

    btnSub.css(btnCss);

    scrollDiv.append(btnAdd);

    scrollDiv.append(btnSub);

    $('body').append(scrollDiv);

    //窗口滚动事件

    $(window).scroll(function(){

        var scrollTop = $(document).scrollTop();        //网页被卷去的高

        var divHeight = scrollDiv.outerHeight() ;        //内容高度+padding高度+边框宽度

        var windowHeight = $(window).height() ;            //窗口高度

        var targer = parseInt((windowHeight - divHeight) / 2) + scrollTop ;

          scrollMove( scrollDiv ,targer );                            //上下移动

        //左右移动

          scrollDiv.offset( {left : $(document).scrollLeft()  + $(window).width() - scrollDiv.outerWidth()} )

    });

    //浏览器窗口大小监听事件

    $(window).resize(function () {

          scrollDiv.offset( {left : $(document).scrollLeft()  + $(window).width() - scrollDiv.outerWidth()} )

    });

})

function scrollMove( scrollDiv , target){

        //注销scrollTimeTask

        clearInterval(scrollTimeTask);

        //注册scrollTimeTask

        scrollTimeTask = setInterval(function(){

            var offset = scrollDiv.offset() ;

            var speed = (target - offset.top) / 8;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //到达指定位置时,注销scrollTimeTask

            if( (offset.top - target >= -1) && (offset.top - target <= 1) ){

//            if( offset.top == target ){

                clearInterval(scrollTimeTask);

            }else{

                var t = offset.top + speed ;

                scrollDiv.offset({top : t } );

            }

          },30);        //每30毫秒调用一次scrollTimeTask

    }

相关知识笔记

/*Javascript*/

document.body.clientWidth        //网页可见区域宽

document.body.clientHeight       //网页可见区域高

document.body.offsetWidth        //网页可见区域宽(包括边线的宽)

document.body.offsetHeight       //网页可见区域高(包括边线的高)

document.body.scrollWidth        //网页正文全文宽

document.body.scrollHeight       //网页正文全文高

document.body.scrollTop          //网页被卷去的高

document.body.scrollLeft         //网页被卷去的左

window.screenTop　　　　　　　　　　//网页正文部分上

window.screenLeft                //网页正文部分左

window.screen.height　　　　　　　 //屏幕分辨率的高

window.screen.width              //屏幕分辨率的宽

window.screen.availHeight        //屏幕可用工作区高度

window.screen.availWidth         //屏幕可用工作区宽度            
/*JQuery*/

$(document).ready(function(){

    alert($(window).height());                   //浏览器当前窗口可视区域高度

    alert($(document).height());                 //浏览器当前窗口文档的高度

    alert($(document.body).height());            //浏览器当前窗口文档body的高度

    alert($(document.body).outerHeight(true));   //浏览器当前窗口文档body的总高度 包括border padding margin

    alert($(window).width());                    //浏览器当前窗口可视区域宽度

    alert($(document).width());                  //浏览器当前窗口文档对象宽度

    alert($(document.body).width());             //浏览器当前窗口文档body的宽度

    alert($(document.body).outerWidth(true));    //浏览器当前窗口文档body的总宽度 包括border padding margin

})

/*

    height：指元素内容的高度,jQuery中的height()方法返回的就是这个高度。

    clientHeight：内容高度+padding高度,jQuery中的innerHeight()方法返回的就是这个高度。

    offsetHeight：内容高度+padding高度+边框宽度,jQuery中的outerHeight()方法返回的就是这个高度。

*/

JQuery实现悬浮工具条的更多相关文章

  1. 雷林鹏分享：jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

    jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...

  2. jQuery信息提示工具jquery.poshytip （转载）

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

  3. 积累的VC编程小技巧之工具条和状态条

    1.工具条和状态条中控件的添加: 方法⑴.只能在ToolBar里创建控件:首先,在ToolBar中创建一个Button,其ID为ID_TOOL_COMBO(我们要将创建的控件放在该Button的位置上 ...

  4. jQuery:jQuery性能优化28条建议

    http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...

  5. 黄聪：自定义WordPress前台、后台顶部菜单栏管理工具条的技巧

    使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插 ...

  6. 黄聪：自定义WordPress顶部管理工具条的技巧（转）

    使用WordPress开发网站项目,很多时候都需要对进行后台定制,今天倡萌主要分享下自定义顶部管理工具条的使用技巧. 注:如无特殊说明,请将下面的代码添加到主题的 functions.php  或者插 ...

  7. Navisworks API 简单二次开发 （自定义工具条）

    在Navisworks软件运行的时候界面右侧有个工具条.比较方便.但是在二次开发的时候我不知道在Api那里调用.如果有网友知道请告诉我.谢谢. 我用就自己设置一个工具.界面比较丑!没有美工. 代码: ...

  8. arcengine中自定义工具和自带工具条（ICommand）点击后和其他工具使用的冲突

    自己系统中本身对于放大缩小等功能直接是单独重写的,但是如果在加一个工具条具有相同功能的话两者之间会有一些冲突,为解决该冲突可以重写工具条的OnItemClick事件 该工具条命名为axTool 我本身 ...

  9. 【代码笔记】iOS-页面调的时候隐藏工具条

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

随机推荐

  1. awr相关指标解析

    awr相关指标解析 2016年11月11日 15:09

  2. 初识sass框架

    编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js ...

  3. 【转】jQuery教程

    “jQuery风暴” 推荐及配套代码下载 ziqiu.zhang 2011-03-24 00:28 阅读:15339 评论:100   从零开始学习jQuery(剧场版) 你必须知道的javascri ...

  4. Invalid project description overlaps the location of another project [android]

    解决办法: 1.将工程放到其他目录下,然后执行Android工程的导入,导入时可以选择“Copy projects into workspace”: 2.不用Android工程导入,而用普通的工程导入 ...

  5. 从windows到Linux-ubuntu新手

    版本选择: 经多次实验,Ubuntu个人认为长期支持(LTS)版才值得装. VMware9中测试:Ubuntu10.04开机内存170M,Ubuntu12.04开机内存340M. 个人感觉Ubuntu ...

  6. linux如何开机以命令行形式启动？

    在管理员权限下,修改/etc/inittab文件即可.把id:5:initdefault:改为id:3:initdefault:就可以了. 如下图所示: 图1: . 图2:

  7. jQuery 源码基本框架

    抽丝剥茧, 7000+ 行的 jQuery 源码基本可以概括为以下的伪代码 (function (window, undefined) { //将 document 封装成 jQuery 对象并缓存 ...

  8. js事件处理 —— 详解

    对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...

  9. CentOS下命令行和桌面模式的切换方法（转载）

    桌面模式和命令行模式的切换方法 用编辑器打开 /etc/inittab 文件(这里用的是vi,你可以选择你喜欢的): #vi /etc/inittab 打开效果图如下: 桌面模式    : 把光标所在 ...

  10. codevs 1078 最小生成树

    题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这 ...