![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js效果
前端小白0
这个作者很懒,什么都没留下…
展开
-
无缝轮播
无缝轮播图 无缝轮播思想:无缝就是让每两张图片都有一个无缝轮播的效果,1和2、2和3、3和4、4和5、5和1.难实现的是最后一张和第一张的无缝轮播效果,是个效果实现的方法就是克隆第一张图片放在最后面(我们把克隆这张叫做6),在轮播到第6张图示,让图瞬间回到第一张,‘oUl.style.left = 0 + ‘px’;’就是用这句来实现,这样看不出来瞬间的过程,这样就实现了无缝轮播了,话不多说代码奉...原创 2018-09-18 20:27:14 · 298 阅读 · 0 评论 -
放大镜
放大镜原理 放大镜的思想:可以看出来,大图和小图移动的距离是成比例的: 小图的宽度/mask移动的距离 = 大图的宽度/大图移动的距离;并且小图和大图移动的方向是相反的,我们能根据根据上面的公式去求出,大图移动的距离,还要求出大图的宽度:大图 = 小图/mask*big; 当然如果能找到图片大小成比例的,也就不用在求大图的宽度了 。代码奉上: /*css代码*/ <style type="t...原创 2018-09-20 09:48:52 · 207 阅读 · 0 评论 -
瀑布流
瀑布流思想 瀑布流就是我们放好第一行,从第二行放,就找列的高度最小,就把第二行的第一张放在高度最小的那一列下面,以此类推,接下来放图就根据这个标准,这样是为了我们放的张数越多,保证每一列的高度都相近。哈哈,这是我自己总结的。下面是代码: /*HTML代码*/ &amp;lt;div id=&quot;container&quot;&amp;gt; &amp;lt;div class=&qu原创 2018-09-15 14:53:37 · 118 阅读 · 0 评论 -
轮播图(透明)
轮播图思想 轮播图就是只要做出右点击就基本没什么了,透明轮播图当点击下一张时让当前图片透明度变为0,下一张图变为1。话不多说,代码双手奉上: /*HTMl代码*/ &lt;div class="box"&gt; &lt;ul class="item"&gt; &lt;li style=&原创 2018-09-15 16:05:09 · 1118 阅读 · 0 评论