Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 

Repository files navigation

boomJS

一个有趣的动画效果,用 JavaScript 配合 CSS3 实现让图片爆炸的动画。

Demo演示戳我

Example

Boom效果演示图

Boom效果演示图

Usage

<!-- style -->
<link rel="stylesheet" type="text/css" href="Boom.css" />
<!-- scripts -->
<script src="jquery.js"></script>
<!-- scripts -->
<script src="boom.js"></script>

<script>
// 调用方法:
//法一:传入图片的 jQuery 对象
boom($('img')) 

// 法二:构建 boom 实例,传入图片的 jQuery 对象
var bom = boom();
bom.boom($('img'));
</script>

API

boom($('img'),{
  // 缩放值
 'scaleLevel' : 3,
  // 模糊值
 'blurLevel': 9,
  // 弹射距离 
 'boomLevel': 4,
  // 爆炸时长
 'boomTime':800,
  // 是否打开日志
 'isOpenLog':true
});

温馨提示,不建议将 scaleLevel 的值设太高 :) 。

About

JavaScript实现一个有趣的浏览器图片爆炸动画效果

Topics

Resources

Stars

388 stars

Watchers

19 watching

Forks

Releases

Packages

Contributors

Languages