H5页面悬浮球，可拖动

H5页面悬浮球，可拖动

$(document).ready(function() {
	//设置样式
	$("body").css({"margin":0,"padding":0});
	$(".homepage-btn").css({//初始化HOME图标到屏幕右上角
		"left":($(window).width()-$(".homepage-btn").width()-10) + "px"	,			
		"top":"85%"		
	})
	setTimeout('$(".homepage-btn").css({"opacity":"0.2","-webkit-transition":"opacity 2s"})',3000);
    //绑定home键事件
	$(".homepage-btn").click(function() {
		window.location.href = getLocalStorageValue("homeUrl");
	});
	//home键在屏幕移动
	var cont=$(".homepage-btn");	
	var contW=cont.width();
	var contH=cont.height();			
	var startX,startY,sX,sY,moveX,moveY;		
	var winW=$(window).width();	
	var winH=$(window).height();
	var barrage_name=$(".homepage-btn").children(".home");
	var body=$("body");
	
	cont.on({//绑定事件
		touchstart:function(e){
			$(".homepage-btn").css({"opacity":"0.9","-webkit-transition":"opacity 0.1s"});
			//$(".homepage-btn").css({"animation":"fade-in","animation-duration":"0.5s","-webkit-animation":"fade-in 0.5s"});
			startX = e.originalEvent.targetTouches[0].pageX;	//获取点击点的X坐标	
			startY = e.originalEvent.targetTouches[0].pageY;    //获取点击点的Y坐标
			//console.log("startX="+startX+"************startY="+startY);
			sX=$(this).offset().left;//相对于当前窗口X轴的偏移量
			sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量
			//console.log("sX="+sX+"***************sY="+sY);
			leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
			rightX=winW-contW+leftX-3;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
			topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置
			bottomY=winH-contH+topY-2;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置				
			},
		touchmove:function(e){			
			e.preventDefault();
			moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
			moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
			//console.log("moveX="+moveX+"************moveY="+moveY);
			if(moveX<leftX){moveX=leftX;}								
			if(moveX>rightX){moveX=rightX;}
			if(moveY<topY){moveY=topY;}
			if(moveY>bottomY){moveY=bottomY;}			
			$(this).css({
				"left":moveX+sX-startX,
				"top":moveY+sY-startY
			})
			/*setLocalStorageValue("home_left",moveX+sX-startX);
			setLocalStorageValue("home_top",moveY+sY-startY);*/
			},
		touchend:function(e){
			var curX = moveX+sX-startX;//当前拖动位置的X坐标
			var curY = moveY+sY-startY;//当前拖动位置的Y坐标
			/**
			 * 如果当前拖动位置X坐标等于0或者Y坐标等于0,则按照拖动的坐标定位。否则，按重新定位
			 */ 
			 if(curX && curY){
			 	if((curX == 0  || curX+44+3 == $(window).width()) || curY == 0  || curY+44+2 == $(window).height()){
				}else{
					if(curX >= $(window).width()/2){
						curX = ($(window).width()-$(".homepage-btn").width()-3);
					}else{
						curX = 3;
					}
				}
				$(this).css({
					"left":curX + "px"	,
					"top":curY + "px"	
				});
			 }
			 setTimeout('$(".homepage-btn").css({"opacity":"0.2","-webkit-transition":"opacity 2s"})',3000);
		},
	})
	
	
	//公共图片查看大图方法
	
	$("body").delegate('#imageCKDT','click',ckdt);
	
	
});
/**获取文件绝对路径前缀**/
function basePath() {
	//当前页面的绝对路径
	var curWwwPath = window.document.location.href;
	//当前页面的相对路径
	var pathName = window.document.location.pathname;
	//获取相对路径在绝对路径中的位置
	var pos = curWwwPath.indexOf(pathName);
	//获取路径前缀
	var localhostPath = curWwwPath.substring(0, pos);
	//获取项目名称
	var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
	return localhostPath + projectName;
}



function ckdt(){
		if($("#model").length==0){
			$(document.body).append('<div id="model" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;outline: 0;-webkit-overflow-scrolling: touch; background-color: rgb(0, 0, 0);  filter: alpha(opacity=60); background-color: rgba(0, 0, 0, 0.6); z-index: 300005;display:none;" onclick="javascript:$(\'#model\').hide();"></div>');
		};
		var Height=document.body.clientHeight;//取得页面可视区域的高度
		var Width=document.body.clientWidth;//取得页面可视区域的宽度
		$("#model").show();
		var html = '<div class="first" style="text-align:center;"></div>';
		$("#model").html(html);
		//$('#PhotoDiv').find('img').attr('src');
		$("#model").children("div[class='first']").css({"width":Width,"height":Width,"top":(Height-Width)/2,"left":"0","position":"absolute","z-index":"100005"});
		var img = '<img id="imgDiv"  src="'+$(this).attr("src")+'" style="max-height:'+Width+',max-width:'+Width+';z-index:100005;padding:0;"></img>';
		$("#model").children("div[class='first']").html(img);
		//设置图片大小 
		if($("#imgDiv").height() >= Width){
	    	$("#imgDiv").css("height",Width);
	    }
	    if($("#imgDiv").width() >= Width){
	    	$("#imgDiv").css("width",Width);
	    }
		//让图片原始大小展示 于屏幕中央
		var DivHeight = document.getElementById("imgDiv").offsetHeight;//获取div块的高度值
		var DivWidth = document.getElementById("imgDiv").offsetWidth;//获取div块中文字所在span的宽度值 
	    var left = (Width - DivWidth) / 2  +  "px";//距容器左边的距离  
	    var top = ($("#model").children("div[class='first']").height() - DivHeight) / 2  +  "px";//距容器上方的距离  
	    $("#imgDiv").css({'position':'absolute','top':top,'z-index':'100005','left':left});
}

css文件

.homepage-btn {
			position: fixed;
			/*right: 10px;*/
			left:200px;
			top: 10px;
			width: 46px;
			height: 46px;
			/**-webkit-transition:opacity 2s;规定完成过渡效果需要2秒*/
			opacity: 0.9;
			/*background:rgba(101,211,186,0.70);*/
			background:-webkit-gradient(linear,0 0,100% 100%,from(#fff), to(#4B98F0));
			/* border:1px solid rgba(75,152,240,0.5); */
			box-shadow:0 2px 4px 0 rgba(110,103,103,0.50);
			border-radius:100%;
			display:block;
			z-index:999;
		}
		.homepage-btn .icon {
			display: inline-block;
			width: 100%;
			height: 100%;
			background: url(../../image/icon-add.png) no-repeat center center/70%;
		}

页面使用：在body中加入

<div class="homepage-btn">
		<i class="icon home"></i>
	</div>