https://github.com/lkiarest/particleimage

图片转换为粒子效果
https://github.com/lkiarest/particleimage

Last synced: about 1 year ago
JSON representation

图片转换为粒子效果

• Host: GitHub
• URL: https://github.com/lkiarest/particleimage
• Owner: lkiarest
• License: mit
• Created: 2016-04-01T14:23:51.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-01T15:04:27.000Z (about 10 years ago)
• Last Synced: 2025-01-21T08:45:09.106Z (over 1 year ago)
• Language: JavaScript
• Size: 7.81 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ParticleImage

当鼠标移到图片上时将图片打碎成像素点，然后转换为粒子效果做动画重新组成图片

###演示页面：

[http://www.qintianxiang.com/](http://www.qintianxiang.com/)

鼠标移到博客的logo上可以查看效果

基于h5的canvas标签实现，所以不支持悲催的低版本 ie (< 9)

```

// 使用方法

ParticleImage.create("logo", "./images/logo.png", "fast");

```

> 第一个参数"logo"为元素的id，需要在css中指定大小，可以为元素指定默认的背景图片

> 第二个参数为图片地址，可以与背景图片相同，支持png，jpg等常用图片格式

> 第三个参数为动画速度，当前支持三种 "fast","mid" and "low"

演示脚本：

```html

    

        particle image

        

        

            #logo {

                margin-left:20px;

                margin-top:20px;

                width:160px;

                height:48px;

                background:url('./images/logo.png');

                /*border: 1px solid red;*/

            }

        

        

        

            window.onload = function() {

                ParticleImage.create("logo", "./images/logo.png", "fast");

            };

        

    

    

        


    


```