84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
最近一个项目中,要求根据用户选择下拉框的值,然后给用户一个预览效果,效果如图所示:
这种效果用js如何实现呢,有哪位大神知道,指导下,谢谢!
学习是最好的投资!
这个其实很简单,你不用想的复杂,你首先看原型图,将每个要可以进行选择部分的图片进行分层,并将改部分的图片固定在原型图对应的位置,默认为隐藏转态,当选择一个选项时,对应的图片显示就可以了。至于分层,你对图片进行绝对定位,然后用z-index来实现就可以了。你先做一个简单的,然后再慢慢的复杂化。
这个再简单不过了,先做布局全部显示出来,然后默认都隐藏起来,下拉选择什么就显示那个隐藏部分,这就是反向思维先别想着用JS一个一个添加上去,而是先布局出来,然后隐藏,JS就是起到显示隐藏功能就行了
代码地址运用数组与对象对p=》img进行赋值
你查看一下例子的源代码就可以看出来,它并不是一开始把所有的图片都加载上去的。
首先每个部件的确都是一张图片, 但是每张图片的背景都是透明的,每张图片的大小都一样, 当定位到同一个地方的时候,重叠就会产生组合的效果。 每个部件的位置如果没有重叠,那么图片的zindex就不用考虑,如果有重叠那就要考虑到zindex
可以把所有的图片都写到一个json配置里面。然后选中了哪个,就从json中读取对应的图片,然后动态一张一张添加到p里面。
这个其实很简单,你不用想的复杂,你首先看原型图,将每个要可以进行选择部分的图片进行分层,并将改部分的图片固定在原型图对应的位置,默认为隐藏转态,当选择一个选项时,对应的图片显示就可以了。至于分层,你对图片进行绝对定位,然后用z-index来实现就可以了。
你先做一个简单的,然后再慢慢的复杂化。
这个再简单不过了,先做布局全部显示出来,然后默认都隐藏起来,下拉选择什么就显示那个隐藏部分,这就是反向思维
先别想着用JS一个一个添加上去,而是先布局出来,然后隐藏,JS就是起到显示隐藏功能就行了
代码地址
运用数组与对象对p=》img进行赋值
你查看一下例子的源代码就可以看出来,它并不是一开始把所有的图片都加载上去的。
首先每个部件的确都是一张图片, 但是每张图片的背景都是透明的,每张图片的大小都一样, 当定位到同一个地方的时候,重叠就会产生组合的效果。 每个部件的位置如果没有重叠,那么图片的zindex就不用考虑,如果有重叠那就要考虑到zindex
可以把所有的图片都写到一个json配置里面。然后选中了哪个,就从json中读取对应的图片,然后动态一张一张添加到p里面。