瀑布流图片墙,原位置点击放大

由 夕空 撰写于  2020年6月15日

<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/greensock/TweenMax.min.js"></script>
<style>
*{box-sizing: border-box;}
.grid li{padding: 5px;}
.grid img{max-width: 110px;}
.w1{width: 60px;}
.w2{width: 120px;}
[class*=w] img{max-width: 100%;}
</style>
</head>

<body>
<ul class="grid">
<li class="w1"><img src="images/img01.jpg" alt=""></li>
<li class="w2"><img src="images/img02.jpg" alt=""></li>
<li class="w1"><img src="images/img03.jpg" alt=""></li>
<li><img src="images/img04.jpg" alt=""></li>
<li><img src="images/img05.jpg" alt=""></li>
<li><img src="images/img06.jpg" alt=""></li>
<li class="w2"><img src="images/img01.jpg" alt=""></li>
<li><img src="images/img02.jpg" alt=""></li>
<li><img src="images/img03.jpg" alt=""></li>
<li><img src="images/img04.jpg" alt=""></li>
<li class="w1"><img src="images/img05.jpg" alt=""></li>
<li>多复制些...</li>
</ul>
<!-- 图片加载侦听-->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- 瀑布流布局-->
<script src="js/masonry.pkgd.min.js"></script>
<script>
//获得物体中心和鼠标坐标连线,与y轴正半轴之间的夹角
function getAngle(target1, target2) {
var x = Math.abs(target1.x - target2.x);
var y = Math.abs(target1.y - target2.y);
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var cos = y / z;
var radina = Math.acos(cos);//用反三角函数求弧度
var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度

if (target2.x > target1.x && target2.y > target1.y) {//鼠标在第四象限
angle = 180 - angle;
}
if (target2.x == target1.x && target2.y > target1.y) {//鼠标在y轴负方向上
angle = 180;
}
if (target2.x > target1.x && target2.y == target1.y) {//鼠标在x轴正方向上
angle = 90;
}
if (target2.x < target1.x && target2.y > target1.y) {//鼠标在第三象限
angle = 180 + angle;
}
if (target2.x < target1.x && target2.y == target1.y) {//鼠标在x轴负方向
angle = 270;
}
if (target2.x < target1.x && target2.y < target1.y) {//鼠标在第二象限
angle = 360 - angle;
}

return angle;
}
// 两点间距离
function getDistance(target1, target2) {
var xdiff = Math.abs(target2.x - target1.x);
var ydiff = Math.abs(target2.y - target1.y);
return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
}
</script>

<script>
var $grid = $('.grid').masonry();
$grid.imagesLoaded().progress(function () {
$grid.masonry('layout');
});

var spacing=500;
function juli(onli){
var x=onli[0].getBoundingClientRect().x+onli.width()*.5;
var y=onli[0].getBoundingClientRect().y+onli.height()*.5;
var target1={x:x,y:y}
for(var i=0;i<$('.grid li').length;i++){
var $target=$('.grid li').eq(i);
var target2={x:$target[0].getBoundingClientRect().x+$target.width()*.5,y:$target[0].getBoundingClientRect().y+$target.height()*.5}
var dis = getDistance(target1,target2)
if(dis<spacing){
var s = (dis+100) / spacing * 1;

var angle = -getAngle(target1, target2) - 180;//角度
var radian = (2 * Math.PI / 360) * angle;
var radius = (spacing - (dis / spacing) * spacing) * .3;//半径
TweenMax.to($target, .7, { scale: s, x: Math.sin(radian) * radius, y: Math.cos(radian) * radius, ease: Power2.easeInOut });
}else{
TweenMax.to($target, .7, { scale: 1, x: 0, y: 0, ease: Power2.easeInOut });
}
}
TweenMax.to(onli, .7, { scale: 3, ease: Power2.easeInOut });

}

$('.grid li').click(function(ev){
juli($(ev.currentTarget))
})

</script>
</body>

</html>


声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 瀑布流图片墙,原位置点击放大


欢迎光顾我的小站!