最新Layer彈出層執行個體
代碼如下，會有意外收獲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="./layer/layer.js"></script>
<script>
//滑鼠點選出現愛心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
$(function(){
/**
* layer提供了5種層類型。可傳入的值有：0（資訊框，預設）1（頁面層）2（iframe層）3（加載層）4（tips層）。
* 若你采用layer.open({type: 1})方式調用，則type為必填項（資訊框除外）
*/
$("#a1").click(function() {
// alert('綁定上事件了');
layer.msg("layer引入進來了", {time:1000 });
// layer.confirm("這裡是提示的内容", function () {
// alert("點選确定進入的事件");
// }, function () {
// alert("點選取消後進入的時間");
// });
// alert("layer是異步的執行，不等你點确認或者取消，這裡都會執行到，是以後面要執行的代碼都要放到layer裡面的回調函數中");
});
$("#a2").click(function() {
layer.open({
type:0,
title:['自定義标題', 'font-size:18px;'],
content:'提示的内容'
});
});
// 樣式不會搞
$("#a3").click(function() {
layer.open({
skin: 'demo-class',
content: 'haha'
})
});
// 圖示
$("#a4").click(function() {
// layer.alert('酷斃了', {icon: 1});
layer.msg('酷斃了', {icon: 1});
// layer.alert('不開心', {icon: 5});
layer.msg('不開心', {icon: 5, time: 3000});
});
// 按鈕1
$("#btn1").click(function() {
layer.confirm('這是第一個按鈕',function() {
console.log('确認後回調');
},function() {
console.log('取消後回調');
});
});
// 按鈕2
$("#btn2").click(function() {
layer.confirm('納尼？', {
btn: ['按鈕一', '按鈕二', '按鈕三','按鈕四'] //可以無限個按鈕
,btn4: function(index, layero){
//按鈕【按鈕三】的回調
console.log('按鈕三的回調');
},btn3: function() {
console.log('按鈕三的回調');
},btn2: function() {
console.log('按鈕二的回調');
},btn1: function() {
console.log('按鈕一的回調');
}
});
});
// 按鈕3
$("#btn3").click(function() {
layer.open({
content: 'test'
,btn: ['按鈕一', '按鈕二', '按鈕三']
,yes: function(index, layero){
//按鈕【按鈕一】的回調
console.log('按鈕【按鈕一】的回調');
console.log(index);
console.log(layero);
// layer.close(index);
},btn2: function(index, layero){
//按鈕【按鈕二】的回調
console.log('按鈕【按鈕二】的回調');
},btn3: function(index, layero){
//按鈕【按鈕三】的回調
console.log('按鈕【按鈕三】的回調');
},cancel: function(){
//右上角關閉回調
console.log('右上角關閉回調');
}
});
});
// layer.alert 普通資訊框
$("#alert1").click(function() {
layer.alert('簡單的提示');
});
$("#alert2").click(function() {
layer.alert('加一個表情', {icon: 1});
});
$("#alert3").click(function() {
layer.alert('有回調了 控制台有輸出', {icon: 1}, function(index) {
window.console.log('alert的回調函數');
layer.close(index); // 關閉提示框
});
});
// layer.confirm 詢問框
$("#confirm1").click(function() {
layer.confirm('is not? 确認控制台輸出', function(index){
//do something
console.log('确認的回調');
layer.close(index);
});
});
$("#confirm2").click(function() {
layer.confirm('is not? 确認控制台輸出', {icon: 3}, function(index){
//do something
console.log('确認的回調');
layer.close(index);
});
});
$("#confirm3").click(function() {
layer.confirm('is not? 确認控制台輸出', {icon: 3, title:'倉老師提示：'}, function(index){
//do something
console.log('确認的回調');
layer.close(index);
});
});
// layer.msg
$("#msg1").click(function() {
layer.msg('弱弱的提示');
});
$("#msg2").click(function() {
layer.msg("有表情的提示", {icon: 6});
});
$("#msg3").click(function() {
layer.msg("提示會顯示3秒", {icon: 6, time: 2000 });
});
$("#msg4").click(function() {
layer.msg("提示結束後 執行方法 控制台", {icon: 6, time: 2000 }, function() {
console.log("提示結束，我就執行");
});
});
// layer.load
$("#load1").click(function() {
var index = layer.load();
// layer.close(index);
});
$("#load2").click(function() {
var index = layer.load(1);
// layer.close(index);
});
$("#load3").click(function() {
console.log("最長等待3秒");
var index = layer.load(2, {time: 3000});
// layer.close(index);
});
$("#load4").click(function() {
console.log("控制關閉");
var index = layer.load();
layer.close(index);
});
// tips 提示的位置比msg更精準
$("#tips1").click(function() {
layer.tips('隻想精準的提示', this); // "tips4"
});
$("#tips2").click(function() {
layer.tips('隻想精準的提示', "#tips3"); //可以提示到别人頭上去
});
$("#tips3").click(function() {
layer.tips('在上面', "#msg4", {
tips:1 // 提示出現的位置 1 2 3 4 上 右 下 左 當下面沒有位置時顯示在上面
});
});
});
</script>
</head>
<body>
<a id="a1" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >引入layer</a><br/>
<a id="a2" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >層1</a><br/>
<a id="a3" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >樣式</a><br/>
<a id="a4" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >圖示</a><br/>
<a id="btn1" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >按鈕1</a><a id="btn2" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >按鈕2</a><a id="btn3" href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >按鈕3</a><br/>
<h5>layer.alert 普通資訊框</h5>
<button id="alert1">按鈕一</button>
<button id="alert2">按鈕二</button>
<button id="alert3">按鈕二</button>
<h5>layer.confirm 詢問框</h5>
<button id="confirm1">按鈕一</button>
<button id="confirm2">按鈕二</button>
<button id="confirm3">按鈕二</button>
<h5>layer.msg(content, options, end) - 提示框</h5>
<button id="msg1">按鈕一</button>
<button id="msg2">按鈕二</button>
<button id="msg3">按鈕三</button>
<button id="msg4">按鈕四</button>
<h5>layer.load(icon, options) - 加載層</h5>
<button id="load1">按鈕一</button>
<button id="load2">按鈕二</button>
<button id="load3">按鈕三</button>
<button id="load4">按鈕四</button>
<h5>layer.tips(content, follow, options) - tips層</h5>
<button id="tips1">按鈕一</button>
<button id="tips2">按鈕二</button>
<button id="tips3">按鈕三</button>
</body>
</html>
![用js實作的一個加載中狀态的動态效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)