当前位置：首页 > 网页特效 > 图片特效

jQuery超酷动感模糊图片视觉差特效

分类：图片特效日期：2024-05-14 点击(0) 评论(0)

jQuery超酷动感模糊图片视觉差特效

简介

使用该视觉差插件需要引入jQuery和jquery.parallax.js以及jquery.mCustomScrollbar.css文件。

```html
<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>    
```          
#####  HTML结构
```html
<div class="container">
    <img src="example.jpg">
</div>  
```             
#####  初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该视觉差插件。

```html
$('.container').parallax(options);             
```
#####  配置参数
下面是这个视觉差插件的可用参数：

- imageSelector：图片的选择器，会在container中进行搜索。默认是img，该参数只会选择第一个匹配的元素。
- shadowCount：克隆图片的数量。默认是4。数字太大会影响性能。
- shadowOpacity：克隆图片的透明度。值在0（隐藏）到1（完全可见）之间。默认值：1 / (shadowCount + 1)。
- clipShadows：是否在图片容器上应用overflow: hidden，是克隆的图片不会溢出容器。默认值：true。
- hideOnMouseLeave：是否当鼠标离开图片容器的时候隐藏克隆的图片。默认值：true。
- hideOriginalImage：是否在创建克隆图片之后隐藏原来的图片。默认值：true。
- maxRotationDegree：图片的最大旋转角度，默认值是10。正数值会使图片接近鼠标，负数值会使图片远离鼠标。
- translateMultiplier：鼠标滑过图片时水平和垂直移动的数量，默认值为-10，这将图片的中心远离鼠标。
- imageScale：图片缩放的比例，默认值为1.1。
- perspective：CSS transform: perspective()的值。值越小效果越强烈。默认值为500。
- baseZetaIndex：在第一个克隆图片上使用的CSS z-index的值。
- transformOrigin：是否改变转换的原点。默认值为false。

web299.com

jQuery超酷动感模糊图片视觉差特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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