web16(ColorBox插件编写)
自定义插件
<!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 = $('' ).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 = $('' ).appendTo('body').css({
width:0,
height:0,
marginLeft:0,
marginTop:0
});;
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);
效果图：
自定义动画队列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义简历</title>
<style>
#box ul{
list-style: none;
margin: 0;
padding: 0;
}
#box{
width: 1000px;
margin: 10px auto;
border: 1px solid black;
}
#box1,#box2{
width: 250px;
height: 200px;
display: inline-block;
}
#box2 ol,#box1 li{
width: 500px;
height: 50px;
overflow: hidden;
}
#box3{
width: 150px;
height: 180px;
overflow: hidden;
margin-left: 250px;
display: inline-block;
top:-20px;
/*border: 1px solid red;*/
}
li div{
width: 250px;
height: 50px;
line-height: 50px;
margin-left: 100px;
position: relative;
top:-50px;
}
ol div{
width: 250px;
height: 50px;
line-height: 50px;
margin-left: 200px;
position: relative;
top:-50px;
}
#box3 img{
width: 150px;
height: 180px;
position: relative;
top:-180px;
}
#title h1{
text-align: center;
}
p{
text-indent: 2em;
}
#box4{
width: 1000px;
height: 116px;
overflow: hidden;
}
#box5{
width: 1000px;
height: 105px;
overflow: hidden;
}
#box6{
width: 1000px;
height: 62px;
overflow: hidden;
}
#box7{
width: 1000px;
height: 105px;
overflow: hidden;
}
#box4_1,#box5_1{
position: relative;
top:-116px;
}
#box6_1{
position: relative;
top:-62px;
}
#box7_1{
position: relative;
top:-105px;
}
</style>
</head>
<body>
<div id="title"><h1>个人简历</h1></div>
<div id="box">
<ul>
<dl>
<fieldset>
<legend>基本信息</legend>
<div id="box1">
<li><div>姓名：张adf</div></li>
<li><div>年龄：2</div></li>
<li><div>学历：大学本科</div></li>
<li><div>求职意向：JAVA全栈工程师</div></li>
</div>
<div id="box2">
<ol><div>手机：1399172451692</div></ol>
<ol><div>邮箱：11327935119@qq.com</div></ol>
<ol><div>微信：xiaomengzi</div></ol>
<ol><div>地址:陕西省商洛市镇安县</div></ol>
</div>
<div id="box3">
<img src="images/b1.jpg">
</div>
</fieldset>
<div id="box4">
<div id="box4_1">
<fieldset>
<legend>自我评价</legend>
<p>
工作积极认真，细心负责，熟练运用办公自动化软件，善于在工作中提出问题，发
现问题，解决问题，有较强的分析能力，勤奋好学，踏实肯干，动手能力强，认真
负责，有很强的社会责任感，坚毅不拔，吃苦耐劳，喜欢和勇于迎接新挑战！
</p>
</fieldset>
</div>
</div>
<div id="box5">
<div id="box5_1">
<fieldset>
<legend>教育背景</legend>
<ul>学校：宝鸡文理学院</ul>
<ul>专业:计算机科学与技术专业</ul>
<ul>主修课程：数据库原理、计算机图形学、大数据技术，JAVA实用教程</ul>
</fieldset>
</div>
</div>
<div id="box6">
<div id="box6_1">
<fieldset>
<legend>工作经验</legend>
xxxx年x月-xxxx年x月在xx公司进行实习。
</fieldset>
</div>
</div>
<div id="box7">
<div id="box7_1">
<fieldset>
<legend>职业技能</legend>
<li>
<ul>语言能力：大学英语四级（待过）</ul>
<ul>计算机：熟练操作windows平台上的各类应用软件，如Office、各种计算机编程工具。</ul>
<ul>团队能力：具有丰富的团队组建与扩充经验和项目管理与协调经验，能够独当一面。</ul>
</li>
</fieldset>
</div>
</div>
</dl>
</ul>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var juben = [
function () {
$('#box #box1 div:eq(0)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box1 div:eq(1)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box1 div:eq(2)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box1 div:eq(3)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box2 div:eq(0)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box2 div:eq(1)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box2 div:eq(2)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box2 div:eq(3)').css({
left:0,
top:-50
}).animate({
left:0,
top:0
},zhixing)
},
function () {
$('#box #box3 img:eq(0)').css({
left:0,
top:-180
}).animate({
left:0,
top:0
})
},
function () {
$('#box #box4 #box4_1:eq(0)').css({
left:0,
top:-116
}).animate({
left:0,
top:0
},function () {
setTimeout(zhixing,1000)
})
},
function () {
$('#box #box5 #box5_1:eq(0)').css({
left:0,
top:-116
}).animate({
left:0,
top:0
},function () {
setTimeout(zhixing,1000)
})
},
function () {
$('#box #box6 #box6_1:eq(0)').css({
left:0,
top:-116
}).animate({
left:0,
top:0
},function () {
setTimeout(zhixing,1000)
})
},
function () {
$('#box #box7 #box7_1:eq(0)').css({
left:0,
top:-105
}).animate({
left:0,
top:0
},function () {
setTimeout(zhixing,1000)
})
}
];
$(':root').queue('汪伦，你怎么看？',juben);
$(document).click(function () {
$(':root').dequeue('汪伦，你怎么看？');
});
//自执行函数
function zhixing() {
$(':root').dequeue('汪伦，你怎么看？');
}
</script>
</body>
</html>
