实现效果如下

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. 读懂IL代码（一）

    以前刚开始学C#的时候,总有高手跟我说,去了解一下IL代码吧,看懂了你能更加清楚的知道你写出来的代码是如何运行互相调用的,可是那时候没去看,后来补的,其实感觉也不晚.刚开始看IL代码的时候,感觉非常吃 ...

  2. SpringMVC4+thymeleaf3的一个简单实例（篇二：springMVC与thymeleaf的整合）

    延续前篇内容. 开始之前,我们首先要准备以下12个jar文件:spring-aop-4.3.3.RELEASE.jarspring-beans-4.3.3.RELEASE.jarspring-cont ...

  3. 24种设计模式--多例模式【Multition Pattern】

    这种情况有没有?有!大点声,有没有?有,是,确实有,就出现在明朝,那三国期间的算不算,不算,各自称帝,各有各的地盘,国号不同.大家还 记得那首诗<石灰吟>吗?作者是谁?于谦,他是被谁杀死的 ...

  4. 仿照淘宝首页做的一个高度伪对齐demo

    功能就是当右边高度没有左边高的情况下做的一些处理,由于本人技术有限,不兼容所有浏览器, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  5. 为什么我们不喜欢用富UI控件

    我们对于理解一般意义的抽象关系并没有问题,但如第一部分使用Entity Framework 时说明的,事实恰好相反.我们还喜欢在交付应用程序时利用抽象关系,比如使用Azure等云服务.在这两种情况下, ...

  6. Devexpress Barmanager设置

    一,在bar的属性中有optionbar,可以做一些设置. 其中比较有用的是:1,去掉最右边的箭头:allowquickcustomization 改为false 2,去掉最左边的竖线:drawdra ...

  7. 封装cookie组件

    var Cookie = { // 读取 get: function(name){ var cookieStr = "; "+document.cookie+"; &qu ...

  8. JQuery焦点Table

    ;;} .table-bordered{;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .table{mar ...

  9. C#应用程序获取项目路径的方法总结

    一.非Web程序   //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory     //当前工作目录的完全限定路径2.Envi ...

  10. Windows Open with Sublime Text

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text] "Icon&q ...