实现效果如下

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. 文字排版--下划线(text-decoration:underline)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. MYSQL命令行连接数据库

    连接数据库 mysql -uroot -proot -P3306 -Dmydemo # 参数详解 -uuser 用户user -ppwd 密码 -P3306 端口 -Dmysql 数据库 #显示所有数 ...

  3. Linux下su与su -命令的区别

    在启动服务器ntpd服务时遇到一个问题 使用 su root 切换到root用户后,不可以使用service命令: 使用 su - 后,就可以使用service命令了. 原因: su命令和su -命令 ...

  4. QT QSettings 操作（导入导出、保存获取信息）*.ini文件详解

    1.QSettings基本使用 1.1.生成.ini文件,来点实用的代码吧. QString fileName;fileName = QCoreApplication::applicationDirP ...

  5. Android的进程和线程（转）

    进程和线程 当一个应用程序第一次启动的时候,Android会启动一个Linux进程和一个主线程(即UI线程:主要负责处理用户的按键事件.触屏事件及屏幕绘图事件等).默认情况下,所有该程序的组件都将在该 ...

  6. ios开发之通知事件

    每天学习一点点,总结一点点,成功从良好的习惯开始! 昨天学习了ios开发中的关于通知事件的一些东西,在这里简单总结下,仅供初学者学习,更多的是怕我自己忘了,咩哈哈~~~~ 通知(notificatio ...

  7. WIN10 搜索功能无法搜索本地应用

    原因是使用360卫士此类软件把windows search 服务给禁掉了. 解决方案很简单,就是把windows search 服务重新设置成自启动,并立刻启动,就ok了. 至于如何打开服务组件,可以 ...

  8. Django db relationship

    # coding=utf-8 from django.db import models """ Django数据库关系: 一对一关系:OneToOneField 多对多关 ...

  9. Node.js全局对象

    Node.js的全局对象是具有全局性的,它们可在所有的模块中应用.我们并不需要包括这些对象在应用中,而可以直接使用它们.这些对象的模块,函数,字符串和对象本身,如下所述. __filename __f ...

  10. 关于javascript

    Client-Language-----------------------JavaScript/Object-C/Java/C# HTML5 DOM/Template/Data/Ajax/Regul ...