自定義插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿colorbox效果的插件</title>
<style>
img{
width: 200px;
}
</style>
</head>
<body>
<img src="../images/a1.jpg" data-myColorBox="">
<img src="../images/a2.jpg" data-myColorBox="">
<img src="../images/a3.jpg" data-myColorBox="">
<img src="../images/a4.jpg" data-myColorBox="">
<img src="../images/a5.jpg" data-myColorBox="">
<img src="../images/a6.jpg" data-myColorBox="">
<img src="../images/0.webp" data-myColorBox="">
<img src="../images/1.webp" data-myColorBox="">
<img src="../images/2.webp" data-myColorBox="a">
<img src="../images/3.webp" data-myColorBox="a">
<img src="../images/4.webp" data-myColorBox="">
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/jQuery.myColorBox-1.0.0.js"></script>
<script>
$(function () {
// $('img').myColorBox();
$.myColorBox();
})
// //圖片預加載
// var img = new Image();
// img.src = 'xxxx';
//
</script>
</body>
</html>
自定義的json
!(function ($) {
$.myColorBox = function (userArg) {
var arg = {
};
$.extend(arg,userArg);
//建立遮罩層
var maskLayer;
//建立圖片的顯示層（遮罩層上面那一層）
var viewLayer;
//定義圖片容器
var img;
//定義原始數據的寬和高的尺寸
var $width,$height;
//定義一個寬高
var _w,_h;
var imgList = $('[data-myColorBox]');
// imgList.css({
// outline:'1px solid red'
// });
imgList.css({
cursor:'pointer'
}).hover(function () {
$(this).css({
outline:'2px solid blue'
})
},function () {
$(this).css({
outline:'none'
})
})
//當圖片被點擊時，所要乾的事情
.click(function () {
//1判斷用於樣式的基礎元素是否存在，不存在則建立
if($('myColorBoxMaskLayer').length != 0){
maskLayer = $('myColorBoxMaskLayer');
}else{
maskLayer = $('<myColorBoxMaskLayer>').appendTo('body')
//當遮罩層被點擊時，起到一個關閉圖片的效果
maskLayer.click(function () {
maskLayer.stop().fadeOut();
viewLayer.stop().fadeOut();
img.stop().fadeOut();
})
}
//1判斷用於樣式的基礎元素是否存在，不存在則建立
if($('myColorBoxViewLayer').length != 0){
viewLayer = $('myColorBoxViewLayer');
img = $('myColorBoxViewLayer img');
}else{
viewLayer = $('<myColorBoxViewLayer>').appendTo('body').css({
width:0,
height:0,
marginLeft:0,
marginTop:0
});;
img = $('<img>').appendTo('myColorBoxViewLayer');
}
//2取得原始數據
//定義一個空的 圖片容器
var $img = new Image();
//將點擊的圖片的url賦值給剛剛定義過的乳片容器對象
$img.src = this.src;
//onload表示當圖片加載完成時，再去取圖片的原始值
$img.onload = function(){
$width = $img.width;
$height = $img.height;
//讓圖片在保持寬高比的情況下自適應屏幕
//得到屏幕的寬和高,然後還要據屏幕有一定的距離
var ww = $(window).width()-100;
var hh = $(window).height()-100;
//定義寬高的比例
var bili = $width/$height;
if($width>ww||$height>hh){
//寬高等比例縮小
if(ww/bili<=hh){
$width = ww;
$height = ww/bili;
}else{
$height = hh;
$width = hh*bili;
}
}
//記錄寬度，高度變化的最小值
var time = Math.min(Math.abs($width-_w),Math.abs($height-_h));
_w = $width;
_h = $height;
//3.完成動畫
//遮罩層的處理過程
maskLayer.css({
position:'fixed',
//上下左右爲0，樣式就會類似於自適應
left:0,
top:0,
right:0,
bottom:0,
//遮蓋層的z軸相對位置
zIndex:9998,
backgroundColor:'black',
//初始狀態隱藏
display:'none'
}).fadeTo(600,.8);
//圖片的顯示層（遮罩層上面那一層）
viewLayer.css({
position:'fixed',
//顯示層居中顯示：及中點從寬度的一半，高度的一半位置
left:'50%',
top:'50%',
backgroundColor:'white',
borderRadius:3,
//初始狀態隱藏
display:'none',
//透明度：一開始逐漸顯現出來
opacity:0,
//遮蓋層的z軸相對位置
zIndex:9999
}).show().animate({
//透明度和寬度同時變化
opacity:1,
//8表示兩邊各多出4px的邊框
width:$width+8,
height:$height+8,
borderRadius:3,
marginLeft:-($width+8)/2,
marginTop:-($height+8)/2
},time,function () {
img.attr('src',$img.src).css({
width:$width,
height:$height,
border:'4px solid white',
borderRadius:3,
display:'none'
}).fadeIn()
});
};
});
}
})(jQuery);
效果圖：
