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