实现效果如下

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. OC - 29.自定义布局实现瀑布流

    概述 瀑布流是电商应用展示商品通常采用的一种方式,如图示例 瀑布流的实现方式,通常有以下几种 通过UITableView实现(不常用) 通过UIScrollView实现(工作量较大) 通过UIColl ...

  2. 绘图quartz之加水印

      实现在图片上加一个水印  并存在document的路径下  同时在手机相册中也存一份 //首先开启imageContext找到图片     UIGraphicsBeginImageContext( ...

  3. c++异常机制实现原理

    今天突然看到一篇文章,讲异常机制的实现,所以分享一下:http://baiy.cn/doc/cpp/inside_exception.htm 内容讲的很深,但是编译器的实现是不是真是这样就不知道了,我 ...

  4. java dos下中文乱码

    代码如下: public class PrintString{ public static void main(String args[]){ System.out.println("\\* ...

  5. Jquery中index()问题

    对于Jquery中的index()问题,很多人会说这个很简单的,并不是一个非常困难的方法.笔者开始的时候也是这样子认为的,但是今天遇到一个index的问题,让我忙了一个晚上都没有解决,最后还是使用co ...

  6. 翻译-让ng的$http服务与jQuerr.ajax()一样易用

    Make AngularJS $http service behave like jQuery.ajax() 让ng的$http服务与jQuerr.ajax()一样易用 作者zeke There is ...

  7. POJ1007-DNA Sorting-ACM

    DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 83442   Accepted: 33584 Des ...

  8. magento前台访问错误

    前台访问出现错误 General error: 145 Table './dbname/tablename' ismarked as crashed and should be repaired 解决 ...

  9. ajax验证用户名和密码

    var user = form.name.value; var password = form.password.value; var url = "chkname.php?user=&qu ...

  10. Django Web在Apache上的部署

    1. 安装配置Apache 2. 安装wsgi_mod模块 3. 开放相应端口 vim /etc/sysconfig/iptables # Firewall configuration written ...