栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

JavaScript实现爆炸碎片的 图片切换 效果

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript实现爆炸碎片的 图片切换 效果

说明

和大家分享一个看上去很酷的效果,先来看效果图吧!

解释

实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 background-position 属性值不同,整齐的覆盖在大的div元素上,这样就能拼成一张完整的背景图,鼠标移入时,让所有小的div元素移动和变形。
总的来说就是两步:
1、生成小的div元素,整齐的覆盖在大的div元素上,像下图这样(为了方便看,把每个小div元素,分开了些)。

2、鼠标移入时,让所有小div元素动起来,主要是改变小div元素的left、top、opacity、transform属性的值

具体实现的代码也并不多,下面是注释很详细的代码。

完整代码


	
	



	
总结

这个效果其实和上次实现的一个雪花效果很类似,
简单说 Javascript实现雪花飘落效果 都是利用定时器实现的动画,定时器应该算是这个效果的重点了,该好好理解下。

这个效果,代码中设置的是让碎片在容器周围散开,当然你也可以在代码中修改 碎片的 endLeft 和 endTop 的值,来改变方向,比如如果改成这样

endLeft: maxW * j / C - (maxW - W),
endTop: maxH * i / R - (maxH- H),

产生的效果就是向左上方移动

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242686.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号