基本 DOM 效果 2 -- 图片切换
发布在DOM效果2014年7月22日view:2995
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

图片切换,几乎每个网站都会有这种效果。效果形式多种多样,包括滚动切换(无缝滚动)、渐变切换、马赛克切换等等,每种效果又有很多变种。下面讨论几种最基本的形式。

1、无缝滚动

    很多网站首页上的图片切换就是半自动的无缝滚动的效果:轮播区域有几个缩略图或者编号,鼠标移动到编号或者缩略图上就切换到该图片,鼠标移动到图片上就停止切换,鼠标移开的时候再开始切换;图片两边有左右的箭头,点击箭头,可以直接切换到上一张下一张…

不管效果多复杂,基本原理还是无缝滚动

1.1、最普通的一种方法就是复制一份做滚动吧,点击查看代码

1.2、还有一个不用新增元素的方法,就是不断移动,比如: 点击这里查看代码 这个是第一次考虑图片轮播时的想出的办法,现在看当时的代码,有很多不规范的地方。只是看个大概意思就够了,这种方法在做复杂效果的时候是不占优势的,多考虑第一种方法吧。

2、渐变切换
上边的例子中改变的是位置,改变透明度又是一种形式。 基本原理如下:切换图片时,当前图片透明度从1递减为0,下一张图片透明度从0递增到1,两个过程重叠发生;结束后,改变两张图片的层级。
点击查看代码

3、马赛克切换
    所谓马赛克切换,实际上是用切片实现的,就是一个个的小块,切换图片的时候,操作的是小块儿。结合 CSS3 还能做出爆炸效果。

3.1、用该原理实现拉幕效果,点击查看代码

3.2、真正的马赛克效果,点击查看代码

注:…在文章里边插入 jsfiddle 真是噩梦… 所以都改成链接了。

评论
发表评论
暂无评论
WRITTEN BY
蛋蛋超人
向钱看 向厚赚 一切都与钱相关!追求卓越 成功会在不经意间追上你!追寻自由,活得更自私些!
TA的新浪微博
PUBLISHED IN
DOM效果

如专栏名称所示,各种DOM效果

我的收藏