每天一个jquery插件-做图片倒影
做图片倒影
重温了数学，真好，!!!∑(ﾟДﾟノ)ノ
效果如下
代码部分
*{
margin: 0px;
padding: 0px;
}
.rel{
position: relative;
}
.clo{
position: absolute;
transform: rotateX(180deg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transform: skewX(20deg)rotateX(180deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做图片倒影</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/ztpdy.js"></script>
<link href="css/ztpdy.css" rel="stylesheet" type="text/css" />
<style>
#img{
width:60%;
display: block;
margin:20px auto;
}
</style>
</head>
<body>
<img id="img" src="img/1.png" />
</body>
</html>
<script>
ztpdy("img");
</script>
var ztpdy = function(id){
var $id = $("#"+id);
$id.parent().addClass("rel");
var $clone =$("<div class='clo'></div>");
$clone.appendTo($id.parent())
var y = $id[0].offsetTop+$id.height()
var x =$id[0].offsetLeft
//这里缺个数学计算，额，就是skew变形之后，会不对称，所以还得让定位往右走一点，具体走多少可以算出来
//这是个标准的直角三角形，已知高和三个角，其中一个偏了20度，求值，qwq
//c=b/tant
var temp = $id.height()/2/Math.tan(20);
//但是算出来还是有点问题，不管了，碎觉
$clone.css({
"top":y,
"left":x+temp,
"width":$id.width(),
"height":$id.height(),
"background-image":"linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),url("+$id.attr("src")+")"
})
}
我想干啥
- 就是想试试这个图片变形，transform这个属性的功能，研究了半天，想着可以做一下倒影的效果，就像一个湖面把岸边的东西都倒映出来的那种感觉，不过我这个有点炸
- 完整的想法是指定容器之后，把容器的东西腾到画布上做成图片再在做成倒影，所以先用图片试试
- 代码不多，就是css部分的使用，然后图片的渐变只找着背景图的线性渐变，所以没办法只能在指定图片之后把图片路径里面的东西赚到背景图里面去，在用background-image里面的属性把背景图设成线性渐变，这里面用起来就和蒙版差不多，哦，接着就是给个变形效果
- 变形搞得脑瓜疼，设置变形起点之后很多东西没摸清楚所以没设置变形起点了，然后就是算了一下三角函数，针不搓
- 代码里面有注释，见笑
- 完事，碎觉