Smart3D是一款效果非常炫酷的jQuery圖片背景視覺差特效插件。該插件將圖片以層的形式排放，當(dāng)鼠標(biāo)滑過圖片的時(shí)候，每一層的圖片的運(yùn)動(dòng)速度各不相同，從而形成強(qiáng)烈的視覺差效果。
查看演示 下載插件
使用方法
HTML結(jié)構(gòu)
該圖片背景視覺差特效使用無序列表來組織各個(gè)圖層，每一個(gè)<li>元素是一個(gè)圖片層。
- <ul id="smartdemo1">
- <li><img src="images/1.png" /></li>
- <li><img src="images/2.png" /></li>
- <li><img src="images/3.png" /></li>
- <li><img src="images/4.png" /></li>
- <li><img src="images/5.png" /></li>
- </ul>
CSS樣式
CSS設(shè)置只需要為<ul>和<li>分別設(shè)置一個(gè)寬度和高度即可。
- #mindscape {
- width: 720px;
- height: 170px;
- overflow: hidden;
- border:2px solid #444444;
- }
- #mindscape li{
- width: 844px;
- height: 170px;
- }
JAVASCRIPT
在頁面加載完畢后，可用下面的方法調(diào)用該視覺差插件。
- $(function() {
- $('#mindscape').smart3d();
- });
可用參數(shù)
以下是該視覺差特效的一些可用參數(shù)。
- frameWidth：類型：integer?？蛇x項(xiàng)，設(shè)置寬度（可以在CSS中設(shè)置）。
- frameHeight：類型：integer?？蛇x項(xiàng)，設(shè)置高度（可以在CSS中設(shè)置）。
- horizontal：類型：boolean?？蛇x項(xiàng)，是否是水平視覺差效果。默認(rèn)值：true。
- vertical：類型：boolean。可選項(xiàng)，是否是垂直視覺差效果。默認(rèn)值：true。
- firstStatic：類型：boolean?？蛇x項(xiàng)，第一個(gè)圖片是否靜止。默認(rèn)值：true。
- lastStatic：類型：boolean?？蛇x項(xiàng)，最后一個(gè)圖片是否靜止。默認(rèn)值：true。
- invertHorizontal：類型：boolean?？蛇x項(xiàng)，水平反轉(zhuǎn)。默認(rèn)值：false。
- invertVertical：類型：boolean。可選項(xiàng)，垂直反轉(zhuǎn)。默認(rèn)值：false。
via:http://www./jQuery/shijuecha/201504051627.html
 圖片附件: 201504051520.jpg (昨天 14:56, 110.4 KB) / 下載次數(shù) 0
http://bbs./forum.php?mod=attachment&aid=MjgwMjV8NWNmOTI5ZDV8MTQyOTg3NTQ4MHwwfDA%3D
|
