实现效果如下
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="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()方法返回的就是这个高度。 */