Smart3D是一款效果非常炫酷的jQuery圖片背景視覺(jué)差特效插件。該插件將圖片以層的形式排放，當鼠標滑過(guò)圖片的時(shí)候，每一層的圖片的運動(dòng)速度各不相同，從而形成強烈的視覺(jué)差效果。
查看演示 下載插件
使用方法
HTML結構
該圖片背景視覺(jué)差特效使用無(wú)序列表來(lái)組織各個(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設置只需要為<ul>和<li>分別設置一個(gè)寬度和高度即可。
- #mindscape {
- width: 720px;
- height: 170px;
- overflow: hidden;
- border:2px solid #444444;
- }
- #mindscape li{
- width: 844px;
- height: 170px;
- }
JAVASCRIPT
在頁(yè)面加載完畢后，可用下面的方法調用該視覺(jué)差插件。
- $(function() {
- $('#mindscape').smart3d();
- });
可用參數
以下是該視覺(jué)差特效的一些可用參數。
- frameWidth：類(lèi)型：integer?？蛇x項，設置寬度（可以在CSS中設置）。
- frameHeight：類(lèi)型：integer?？蛇x項，設置高度（可以在CSS中設置）。
- horizontal：類(lèi)型：boolean?？蛇x項，是否是水平視覺(jué)差效果。默認值：true。
- vertical：類(lèi)型：boolean?？蛇x項，是否是垂直視覺(jué)差效果。默認值：true。
- firstStatic：類(lèi)型：boolean?？蛇x項，第一個(gè)圖片是否靜止。默認值：true。
- lastStatic：類(lèi)型：boolean?？蛇x項，最后一個(gè)圖片是否靜止。默認值：true。
- invertHorizontal：類(lèi)型：boolean?？蛇x項，水平反轉。默認值：false。
- invertVertical：類(lèi)型：boolean?？蛇x項，垂直反轉。默認值：false。
via:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html
圖片附件:
201504051520.jpg (
昨天 14:56, 110.4 KB) / 下載次數 0
http://bbs.html5cn.org/forum.php?mod=attachment&aid=MjgwMjV8NWNmOTI5ZDV8MTQyOTg3NTQ4MHwwfDA%3D
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
