实现效果如下

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. 使用Xcode插件，让iOS开发更加便捷

    在iOS开发过程中,写注释是一项必不可少的工作.这不仅有助于自己对代码整理回顾,而且提高了代码的可读性,让代码维护变得容易.但是,写注释又是一项枯燥的工作.我们浪费了大量的时间在输入/*,*,*/这样 ...

  2. iOS9 application:application openURL: sourceApplication: annotation: 方法不执行

    - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url NS_DEPRECATED_IOS(2_0, 9 ...

  3. Spring_DI利用set方法赋值Demo

    Person.java public class Person { private Long pid; private String pname; private Student student; p ...

  4. OSG 安装配置

    对于普通用户推荐直接下载安装包配置.如有特殊需求或想了解编译过程可参考网上文章自己编译后配置.(通常建议使用第一种方法即可) 本人安装经验: 失败:自己系统64位,VS2010 32位,开始自己动手编 ...

  5. 脚本学习python和linux-shell和jQuery(javascript)

    使用脚本可以方便管理,使用计算机. 打算学脚本来更好地用计算机系统,特别是Linux. 学python因为它开源,而且是C家族的语言,本来也是课程需要,再加上它确实很好,所以非常主打,之前看过perl ...

  6. linux定时器

    我们常常有设置系统在某一时间执行相应动作的需求,比如设置电脑什么时候自动锁屏,什么时候自动关机,设置应用程序什么时候自动运行,什么时候自动退出.这些与时间相关的功能,都需要依靠操作系统中的定时器来实现 ...

  7. grep操作

    这个程序的名称来自Unix文本编辑器ed类似操作的命令: g/re/p 这个命令搜索整个文件中匹配给定正则表达式的文本行,并显示出来.有很多不同的命令行用于改变grep的默认行为,包括显示出不匹配的文 ...

  8. delegate 中的BeginInvoke和EndInvoke方法

    开发语言:C#3.0 IDE:Visual Studio 2008 一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能 ...

  9. inline-block间隔问题

    使用inline-block实现一个类似float布局效果,但是inline-block的元素间会存在“4px”的空白间距. span { display: inline-block; width: ...

  10. Unity问答——NGUI怎么使用按键模拟鼠标点击？

    这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/248 问:NGUI怎么模拟用代码模拟控制点击 答: 1. 这个问题问得好.因为在使用按键 ...