每天学一个jquery插件-日历的效果
Posted 阿飞超努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每天学一个jquery插件-日历的效果相关的知识，希望对你有一定的参考价值。
每天一个jquery插件-日历的效果
日历的效果
windows的效果
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日历得效果</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
background-color: black;
color: white;
}
#div{
border: 1px solid lightgray;
width: 500px;
height: 500px;
margin: 50px auto;
position: relative;
}
.item{
position: absolute;
width: 50px;
height: 50px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
cursor: pointer;
}
.c{
border-color: white;
z-index: 7;
}
.l{
border-left-color: transparent;
}
.r{
border-right-color: transparent;
}
.t{
border-top-color: transparent;
}
.b{
border-bottom-color: transparent;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
$(function(){
var index = 0;
for(var b = 0;b<10;b++){
for(var a = 0;a<10;a++){
var $item = $("<div class='item' a='"+a+"' b='"+b+"'>"+index+"</div>");
$item.appendTo($("#div"));
$item.css(dir(a,b));
index++;
}
}
//
$(".item").mouseenter(function(){
var a =parseInt($(this).attr("a"));
var b = parseInt($(this).attr("b"));
$(".item").removeClass('c l r t b')
$("[a='"+(a-1)+"'][b='"+b+"']").addClass("c l");
$("[a='"+(a+1)+"'][b='"+b+"']").addClass("c r");
$("[b='"+(b-1)+"'][a='"+a+"']").addClass("c t");
$("[b='"+(b+1)+"'][a='"+a+"']").addClass("c b");
$(this).addClass('c');
})
$("#div").mouseleave(function(){
$(".item").removeClass('c l r t b');
})
})
function dir(a,b){
return{
left:a*50,
top:b*50
}
}
</script>
思路解释
- 额，效果做的很生硬，不过加上animation的动画渐进效果，外加渐变色的边框效果，就能差不多弄出一样的效果了
- ps：不过我没做
- 完事，休息
以上是关于每天学一个jquery插件-日历的效果的主要内容，如果未能解决你的问题，请参考以下文章