当前位置：首页 > 网页特效 > canvas

HTML5 canvas炫酷彩虹条纹图片特效

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

简介

##### 纯js调用
该彩虹条纹图片特效的基本使用方法如下：

```html
<img src='/dave.jpg' class='profile-pic'>
<img src='/jenny.jpg' class='profile-pic'>               
<script src='prideify.js'></script>
<script>
  Prideify('.profile-pic');
</script>        
```        
 通过jQuery调用
你也可以通过jQuery来抵用该图片特效。

```html
<img src='/dave.jpg' class='profile-pic'>
<img src='/jenny.jpg' class='profile-pic'>
 
<script src='jquery.js'></script>
<script src='prideify.js'></script>
<script>
  $('.profile-pic').prideify();
</script>             
$( function() {
    $( '#gallery' ).jGallery();
} );                
```
#####  配置参数
```html
Pridefy(target, [options]);    
```            
- target (optional)：默认值'[date-prideify]'。你想要转换的图片或图片集合。你可以传入一个选择器，任何匹配选择器的元素都会被转换。如果不填写该参数，任何带data-prideify参数的图片都会被转换。
- options (optional)：默认值{}。附加的配置选项。看下面的配置参数。
- 该彩虹图片特效的可用配置参数如下：

- renderedClass：默认值'prideified'，类型：String。在图片被渲染为彩虹条纹图片之后添加到<img>元素上的class。
- crossOriginProxy：默认值false，类型：Boolean或String。由于安全的原因，跨域图片不能被转换为彩虹图片效果。设置crossOriginProxy为true可以通过http://crossorigin.me代理来加载图片，使跨域图片变为可用。
- customStripes：默认值undefined，类型Array of arrays。如果你不想使用默认的颜色，你可以设置一个customStripes颜色数组。它是一个嵌套数组，里面的每一个数组是一个RGB颜色。
```html
Prideify('.profile-pic', { 
  customStripes: [[0, 0, 0], [255, 255, 255]] 
});
```
- afterRender：默认值undefined，类型Function。在图片被渲染之后的回调函数。新图片会作为参数被传入。

web299.com

HTML5 canvas炫酷彩虹条纹图片特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果