学弟学妹们已经学完html和css了,接下来选择学习前端的学弟学妹就要学习js了,因此我现在先将记忆中能回想起来的几个js特效以及实现思路先写下来,以免到时候问起来我一下子想不起来。

1.轮播图

        轮播图可以说是js运用最广泛,最实用的特效之一了,写法也多种多样,这里就先把我知道的两种简单的轮播图实现方式及思路写下来。

(1)左右滑动式轮播图

这个轮播图的效果是图片左右滑动,默认的方向是图片从右向左滑动,实现的思路是先写一个盒子,然后盒子里写一个高度与其一致,宽度是他的n倍(n为图片有几张)的盒子,设置为position:absolute,在这个子盒子里再建立几个用来装图片的小盒子,高度一致,宽度与最开始的盒子一致,图片的宽高与这个盒子一致,盒子设置float:left;最后,再把最开始写的那个盒子设置为overflow:hidden;此时,只能看见一张图片,但是,随着我们改变中间的那个特别宽的盒子的left,就会改变展示的图片,只要left是图片宽度的倍数,就会控制展现不同的图片,这个时候只需要用一个定时器,来定期的改变left的值就可以了,同时还可以设置transition来加上切换动画,使其更加美观。

这个轮播图的实现方式很简单,但是有一个不得不面对的问题,就是当我们从最后一张跳到第一张的时候,是直接从最右侧以很快的速度划到左侧的,这其实有点不是很合适,为了解决这个,我们需要多设置一个放图片的盒子,当然,也得多一张图片,这个图片和第一张一模一样,举个例子:当我们的轮播图切换到最后一张,也就是新加的那张的时候,清除定时器,清楚transition,然后跳到第一页,然后把定时器和transition都加上,继续轮播,当第一张切换最后一张的时候,操作方法类似。

(2)显示隐藏式轮播图

这个轮播图的方法比上面简单的多,同样是建立一个大盒子,但是这次可以直接把所有图片都放到这里,设置透明度为0,然后加定时器,时间一到就给现在展示的图片的透明度设置为0,这里可以加上transition实现淡出,然后下一张要展示的设置为1,淡入,这样来实现图片的切换。

2.下拉框

在html里可以设置下拉框,但是那种下拉框适用于选择某一个属性,比如城市,民族之类的属性的时候使用,我们有的时候需要下拉一大块盒子,比如说点击之后,下拉一大块内容,这里只需要刚开始将height设置为0,然后加点击事件,点击之后height为1,设置过渡产生动画,就结束了。同时还可以用类似的方式,来写下拉框的收回,还有以此来将两个下拉框关联,比如说这个下拉框向下拉,此时点击另一个按钮,先判断前一个下拉框是否处于已下拉的状态,是的话就先收回,再下拉,不是的话直接下拉。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐