如何用js实现一组图片，使用了z-index三层排布，然后点击一张图片，被点击张图片至于顶层，其他依次？

Posted 2023-05-10

<style>
.box display:flex; margin:100px 100px
.box img position:relative; height:200px; transition:all 0.5s; z-index:1; box-shadow:0 0 1px #000
</style>
<div class="box">
<img src="图片1"/><img src="图片2"/><img src="图片3"/><img src="图片4"/><img src="图片5"/>
</div>
<script type="text/javascript">
$(function()
$(".box img").click(function()
$(".box img").css("transform":"scale(1,1)","z-index":"1","box-shadow":"0 0 1px #000");
$(this).css("transform":"scale(1.6,1.6)","z-index":"3","box-shadow":"0 0 10px #000");
if($(this).prev())$(this).prev().css("transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000");
if($(this).next())$(this).next().css("transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000");
);
);
</script>
需要引用jquery 参考技术A

首先我想说的是，这个实现不是你说的这种实现。如果要体验好的效果就直接用轮播效果来做，如下图

如果单纯为了实现效果，可以简单处理（注，跟你的布局估计不一样，只是说明一个简单的思路）：

样式部分：

<style type="text/css">
.imgposition:relative;
.img imgposition:absolute;
.img1left:0;top:80px;z-index:1;
.img2left:100px;top:40px;z-index:2;
.img3left:200px;top:0;z-index:3;
.img4left:300px;top:40px;z-index:2;
.img5left:400px;top:80px;z-index:1;
</style>

html部分：

<div class="img">
<img class="img1" src="图1地址"/>
<img class="img2" src="图2地址"/>
<img class="img3" src="图3地址"/>
<img class="img4" src="图4地址"/>
<img class="img5" src="图5地址"/>
</div>

js部分：

<script type="text/javascript">
$(function()
$('.img img').each(function()
var me = $(this);
me.click(function()
var idx = me.index();
//如果本身就是在最上面，则不做处理
if(idx == 2)
return false;

//把当前点击的下标与中间的样式调换/图片调换
var cls = me.attr('class');
$('.img3').attr('class', cls);
me.attr('class', 'img3');
);
);
);
</script>

追问

这个意思就是点击的只和第一个换？
布局完成之后，是想要它动起来，比如五张图，点击第二个，他变成中间的，而第一张图片就变道第二个的位置，依次

追答

动起来的话建议用轮播插件，不用为兼容而烦恼

参考技术B 用js实现一组图片你可以在使用了z-index三层排布之后进行过滤图层 参考技术C 这个可以写一个这样的代码重复zheh这个命令

如何用threejs添加一个背景

如果你是指给场景设置背景，直接load个texture（可以是普通的texture，也可以是天空盒子那样的cubetexture），然后scene.background=texture 参考技术A 你这个信息太少了，大致上，你可以多嵌套一个层，然后再放上去覆盖就可以了，如果位置需要调整，就用绝对定位，然后z-index就可以了。本回答被提问者采纳