cocos 构建出来的web包里，index.html 文件里添加 <script src="fanhui.js" charset="utf-8"></script> //(调用以下脚本)
新建脚本 fanhui_url.js
var isClick = true;//是否点击确认行为标识
var styleElement = document.createElement("style");
styleElement.innerHTML = '#payRetBtnDiv {' +
' display: none;' +//初始时隐藏
' position: fixed;' +
' 35px;' +
' height: 35px;' +
//' background: url(fanhui_btn.24180.png) ' +
' background-color: rgba(0, 0, 0, 0.2);' +
' z-index: 10000;' +
' cursor: pointer;' +
' top: 0px;' +
' left: 0px;' +
' border-radius: 30%;' +
' padding: 6px;' +
' }' +
' ' +
' #payRetBtnDiv>div {' +
' border-radius: 50%;' +
' 100%;' +
' height: 100%;' +
//' background: url(c:/fanhui_btn.png) ' +
//' background-color: rgba(0, 0, 0, 0.3);' +
' transition: all 0.2s;' +
' -webkit-transition: all 0.2s;' +
' -moz-transition: all 0.2s;' +
' -o-transition: all 0.2s;' +
' }' +
' #payRetBtnDiv:hover>div{' +
' background-color: rgba(0, 0, 0, 0.6);' +
//' background: url(fanhui_btn.png) ' +
' } ';
document.body.appendChild(styleElement);
var new_element_N = document.createElement('div');
new_element_N.setAttribute("id", "payRetBtnDiv");
new_element_N.style.top = "100px";
new_element_N.style.left = "100px";
new_element_N.innerHTML = ' <div style="background:url(fanhui_btn.24180.png);background-size:cover"></div>';
document.body.appendChild(new_element_N);
//
//
var posX;
var posY;
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
var fdiv = document.getElementById("payRetBtnDiv");
fdiv.onmousedown = function(e)
{
isClick = true;
screenWidth = document.documentElement.clientWidth;
screenHeight = document.documentElement.clientHeight;
if (!e) {
e = window.event;
} //IE
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function() //释放时自动贴到最近位置的边上
{
document.onmousemove = null;
if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (screenHeight / 2)) { //在上半部分
if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2) <= (screenWidth / 2)) { //在左半部分
if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) /
2)) { //靠近上方
fdiv.style.top = "0px";
} else { //靠近左边
fdiv.style.left = "0px";
}
} else { //在右半部分
if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2) <= (screenWidth - (parseInt(fdiv.style.left) +
parseInt(fdiv.clientWidth) / 2))) { //靠近上方
fdiv.style.top = "0px";
} else { //靠近右边
fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
}
}
} else { //下半部分
if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth) / 2) <= (screenWidth / 2)) { //在左半部分
if ((screenHeight - (parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2)) <= (parseInt(fdiv.style.left) +
parseInt(fdiv.clientWidth) / 2)) { //靠近下方
fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
} else { //靠近左边
fdiv.style.left = "0px";
}
} else { //在右半部分
if ((screenHeight - (parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight) / 2)) <= (screenWidth - (parseInt(fdiv
.style.left) + parseInt(fdiv.clientWidth) / 2))) { //靠近上方
fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
} else { //靠近右边
fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
}
}
}
}
function mousemove(ev)
{
isClick = false;
if (ev == null) {
ev = window.event;
} //IE
if ((ev.clientY - posY) <= 0) { //超过顶部
fdiv.style.top = "0px";
} else if ((ev.clientY - posY) > (screenHeight - parseInt(fdiv.clientHeight))) { //超过底部
fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
} else {
fdiv.style.top = (ev.clientY - posY) + "px";
}
if ((ev.clientX - posX) <= 0) { //超过左边
fdiv.style.left = "0px";
} else if ((ev.clientX - posX) > (screenWidth - parseInt(fdiv.clientWidth))) { //超过右边
fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
} else {
fdiv.style.left = (ev.clientX - posX) + "px";
}
// console.log( posX +" "+ fdiv.style.left);
}
window.onload = window.onresize = function() { //窗口大小改变事件
screenWidth = document.documentElement.clientWidth;
screenHeight = document.documentElement.clientHeight;
if ((parseInt(fdiv.style.top) + parseInt(fdiv.clientHeight)) > screenHeight) { //窗口改变适应超出的部分
fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
}
if ((parseInt(fdiv.style.left) + parseInt(fdiv.clientWidth)) > screenWidth) { //窗口改变适应超出的部分
fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
}
document.onmouseup.apply()
};
fdiv.addEventListener('touchstart', fdiv.onmousedown, false);
fdiv.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
if ((touch.pageY) <= 0) { //超过顶部
fdiv.style.top = "0px";
} else if (touch.pageY > (screenHeight - parseInt(fdiv.clientHeight))) { //超过底部
fdiv.style.top = (screenHeight - parseInt(fdiv.clientHeight)) + "px";
} else {
fdiv.style.top = (touch.pageY - parseInt(fdiv.clientHeight) / 2) + "px";
}
if (touch.pageX <= 0) { //超过左边
fdiv.style.left = "0px";
} else if (touch.pageX > (screenWidth - parseInt(fdiv.clientWidth))) { //超过右边
fdiv.style.left = (screenWidth - parseInt(fdiv.clientWidth)) + "px";
} else {
fdiv.style.left = (touch.pageX - parseInt(fdiv.clientWidth) / 2) + "px";
}
}
}, false);
fdiv.addEventListener('touchend', document.onmouseup, false);
fdiv.ondblclick = function() { //双击事件可能在手机端浏览器会与网页缩放事件起冲突
//alert("发挥想法，自定义事件");
}
fdiv.onclick = function() { //双击事件可能在手机端浏览器会与网页缩放事件起冲突
if (isClick == true) {
//alert("发挥想法，自定义事件");
cc.find('Canvas').getComponent('dating_chongzhi').HideWebView();
}
}