html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prototype</title>
<link rel="stylesheet" href="component.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="components.js"></script>
</head>
<body>
<script>
var myDialog=new components();
myDialog.myDialog('myDialog');
myDialog.myToast('myToast',1000);
myDialog.myPopup('myPopup',1000);
$(window).on('mousedown',function(e){
touchRun(e);
$(window).on('mousemove',function(e) {
touchRun(e);
});
})
$(window).on('mouseup',function(){
$(window).off('mousemove');
$('#myTouch').remove();
});
function touchRun(e){
e = e || window.event;
x = e.pageX || e.clientX + document.body.scroolLeft;
y = e.pageY || e.clientY + document.body.scrollTop;
myDialog.myTouch('pink',x,y,'myTouch');
}
</script>
</body>
</html>
js:
function components() {}
components.prototype={
//dialog
myDialog:function (message) {
var myDialogLen=$("#myDialog").length;
if(!myDialogLen) { //如果界面上沒有這個彈窗，就拼接
var dialogString='';
dialogString+='<div id="myDialog" class="top-wrapper">';
dialogString+='<div class="c-dialog">';
dialogString+='<div class="dialog-mess">'+message+'</div>';
dialogString+='<div class="dialog-btn">確定</div>';
dialogString+='</div>';
dialogString+='</div>';
$('body').append(dialogString);
}
$(".dialog-btn").on('click',function() {
$("#myDialog").remove();
});
},
//toast
myToast:function (message,time) {
var toast=$('#myToast').length;
if(!toast) { //如果界面上沒有這個彈窗，就拼接
var toastString = '';
toastString += '<div id="myToast">';
toastString += '<div class="c-toast">';
toastString += '<div class="toast-mess">' + message + '</div>';
toastString += '</div>';
toastString += '</div>';
$('body').append(toastString);
}
//如果界面上有這個彈窗，就顯示隱藏
$('.toast-mess').html(message);
$('#myToast').fadeIn();
setTimeout("$('#myToast').fadeOut()",time)
},
//白彈窗
myPopup:function (message,time) {
var popup=$('#myPopup').length;
if(!popup) {
var popupString = '';
popupString += '<div id="myPopup">';
popupString += '<div class="c-popup">';
popupString += '<div class="popup-img">';
popupString += '<img src="../assets/components/images/success.png"/>';
popupString += '</div>';
popupString += '<div class="popup-mess">' + message + '</div>';
popupString += '</div>';
popupString += '</div>';
$('body').append(popupString);
}
$('.popup-mess').html(message);
$('#myPopup').fadeIn();
setTimeout("$('#myPopup').fadeOut()",time)
},
// touch
myTouch:function(color,pageX,pageY,uName){
var touch=$('#myTouch').length;
if(!touch){
touchStyle = '<style>@keyframes warn{0%{transform:scale(0);opacity:0}25%{transform:scale(0);opacity:.1}50%{transform:scale(.1);opacity:.3}75%{transform:scale(.5);opacity:.6}100%{transform:scale(1);opacity:0}}@-webkit-keyframes warn{0%{-webkit-transform:scale(0);opacity:0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(.1);opacity:.3}75%{-webkit-transform:scale(.5);opacity:.6}100%{-webkit-transform:scale(1);opacity:0}}</style>'
$($('head')[0]).append(touchStyle);
var touchString = '';
touchString += '<div id="myTouch">';
touchString += '<div class="touch-box" style="position: absolute;">';
touchString += '<div class="touch-circle" style="position: absolute; top:0; left:0; z-index: 999;">';
touchString += '<div class="touch-circle-dot" style="position: absolute; width:20px; height:20px; border-radius: 50%; background: #4077bd; box-shadow:0 0 5px 2px #4077bd; left: 0; top: 0; "></div>';
touchString += '<div class="touch-circle-pulse" style="position: absolute; width: 60px; height: 60px; left: -20px; top: -20px; opacity: 0;border-radius: 50%; background: #4077bd; -webkit-animation: warn 1s ease-out; -moz-animation: warn 1s ease-out; animation: warn 1s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; "></div>';
touchString += '<div class="touch-circle-big" style="position:absolute;width:50px;height:50px;border-radius:50%;border:2px solid #4077bd; left:-18px;top:-18px"></div>';
touchString += '</div>';
touchString += '<div class="touch-name" style="position: absolute; bottom:10px; left:25px; width:50px; height:20px; color:#fff; background:#4077bd; border-radius: 3px; line-height: 20px; text-align: center; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">'+ uName +'</div>';
touchString += '</div>';
touchString += '</div>';
$('body').append(touchString);
}
$('#myTouch .touch-box').show();
$('.touch-box .touch-name').css('background',color);
$('.touch-box .touch-circle-dot').css('background',color);
$('.touch-box .touch-circle-dot').css('box-shadow','0 0 5px 2px '+ color);
$('.touch-box .touch-circle-big').css('border-color',color);
$('.touch-box .touch-circle-pulse').css('background',color);
$('.touch-box').css('left',pageX);
$('.touch-box').css('top',pageY);
$('.touch-box .touch-name').html(uName);
}
}
css:
/********** component **********/
/* topWrapper: the full screen transparent backgrond*/
.top-wrapper{
top:0;
position:absolute;
z-index:11;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
color:#333;
}
/* dialog */
.c-dialog{
position:absolute;
top:50%;
left:50%;
padding:0;
width:280px;
height:140px;
border-radius:3px;
background:#fff;
font-size:16px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* toast */
.c-toast{
position:absolute;
top:50%;
left:50%;
padding:20px 20px;
width:180px;
line-height:20px;
border-radius:3px;
background:rgba(0,0,0,0.5);
box-shadow:0 0 2px 1px #333;
font-size:16px;
text-align:center;
color: #fff;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 20;
}
.c-dialog .dialog-mess{
padding:35px 20px;
width:auto;
height:auto;
text-align:left;
line-height:20px;
}
.c-dialog .dialog-btn{
position: absolute;
bottom: 10px;
right: 10px;
padding:0;
width: 70px;
height: 30px;
line-height: 30px;
color: #4170b4;
text-align: center;
border-radius: 3px;
}
.c-dialog .dialog-btn:active{
background:#eee;
}
/* myPopup */
.c-popup{
position:absolute;
top:50%;
left:50%;
width:320px;
height:150px;
border-radius:5px;
background:#fff;
font-size:16px;
text-align:center;
color: #fff;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 20;
}
.c-popup .popup-mess{
color:#404040;
font-size: 20px;
}
.c-popup .popup-img{
width:70px;
height:70px;
border-radius: 50%;
overflow: hidden;
margin:20px auto 10px;
}
.c-popup .popup-img>img{
width:100%;
height:100%;
}
