欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

非jQuery實現(xiàn)照片散落桌子上,單擊放大的LightBox效果

 更新時間:2014年11月28日 11:25:30   投稿:hebedich  
本文給大家介紹一款js實現(xiàn)的照片散落桌子上點擊放大圖片的LightBox效果,非常的炫酷,而且是非jQuery實現(xiàn)的,有需要的小伙伴可以參考下

效果圖如下

Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

實現(xiàn)原理很簡單,基本的html如下

復制代碼 代碼如下:

<div id="gallery">
            <div class="item">
                <a class="kitLightBox" href="img/original/blue-green-nature.jpg" target="_blank"><img src="img/thumbs/blue-green-nature.jpg"></a>
                <div class="desc">
                    blue-green-nature
                </div>
            </div>
            <div class="item">
                <a class="kitLightBox" href="img/original/2-breast-stroke.jpg" target="_blank"><img src="img/thumbs/2-breast-stroke.jpg"></a>
                <div class="desc">
                    2-breast-stroke
                </div>
            </div>
            <div class="item">
                <a class="kitLightBox" href="img/original/farm.jpg" target="_blank"><img src="img/thumbs/farm.jpg"></a>
                <div class="desc">
                    farm
                </div>
            </div>
            <div class="item">
                <a class="kitLightBox" href="img/original/bahnhoff.jpg" target="_blank"><img src="img/thumbs/bahnhoff.jpg"></a>
                <div class="desc">
                    bahnhoff
                </div>
            </div>

            ……

先定義一塊桌布,也就是div id=”gallery”

然后按照順序,排列一豎列相冊,div class=”item”,里面用一個a鏈接把圖片包起來

接下來,我們要實現(xiàn)相片的分散效果,

復制代碼 代碼如下:

$k(function() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
top : $kit.math.rand($k('#gallery').innerHeight()) + 'px',
left : $kit.math.rand($k('#gallery').innerWidth()) + 'px',
'-webkit-transform' : 'rotate(' + $kit.math.rand(-40, 40) + 'deg)'
});
})

這里的是$k是kit的寫法,類似jQuery的$,API完全一樣,這段代碼的意思是找到所有item的div,設置為絕對定位,用桌布高寬,生成隨機數(shù),排列,對于css3,使用css3特有的旋轉效果'rotate屬性,旋轉一定角度

這個時候,相片就開始分散開了,達到了圖1的效果,接下來我們要做一下LightBox的效果,

復制代碼 代碼如下:

$k(function() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
top : $kit.math.rand($k('#gallery').innerHeight()) + 'px',
left : $kit.math.rand($k('#gallery').innerWidth()) + 'px',
'-webkit-transform' : 'rotate(' + $kit.math.rand(-40, 40) + 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
el : this
}).init();
});
});

完整代碼如上,對于每個圖片的a鏈接,使用kitjs的lightbox UI widget實例化,得到的效果就能點擊,動畫效果的打開圖片大圖了。^_^祝各位使用愉快!

LightBox源代碼https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

相片分散效果源代碼https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

本文是基于KITJS框架來實現(xiàn)的,小伙伴們如果不是很了解,那么后續(xù)文章,我們來詳細介紹下這款非常棒的js框架。

相關文章

  • 如何寫好你的JavaScript【推薦】

    如何寫好你的JavaScript【推薦】

    在實際工作中,我們應該經常會看到一些功能上沒有問題,但編碼風格和規(guī)范卻十分糟糕的代碼,這往往會讓人不敢再往下閱讀,甚至會影響閱讀者一天的心情。本文的目的在于幫助那些沒有養(yǎng)成良好的編碼風格,缺乏相應編碼規(guī)范意識的JavaScript學習者們改善他們的編碼形象。
    2017-03-03
  • JavaScript實現(xiàn)動態(tài)留言板

    JavaScript實現(xiàn)動態(tài)留言板

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)留言板,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 微信小程序vant彈窗組件的實現(xiàn)方式

    微信小程序vant彈窗組件的實現(xiàn)方式

    這篇文章主要介紹了小程序vant彈窗組件的實現(xiàn)方式,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • JS自定義滾動條效果

    JS自定義滾動條效果

    這篇文章主要為大家詳細介紹了JS自定義滾動條效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • IE圖片緩存document.execCommand("BackgroundImageCache",false,true)

    IE圖片緩存document.execCommand("BackgroundImageCache",

    IE6下設置背景圖片是不會被真正cache住的,就算服務器做了cache,如果想cache住只能
    2011-03-03
  • 利用js 進行輸入框自動匹配字符的小例子

    利用js 進行輸入框自動匹配字符的小例子

    制作論壇用到的輸入框~想模仿百度之類的寫一個自動匹配字符
    2013-06-06
  • js實現(xiàn)滑動輪播效果

    js實現(xiàn)滑動輪播效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)滑動輪播效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • JavaScript 替換所有匹配內容及正則替換方法

    JavaScript 替換所有匹配內容及正則替換方法

    這篇文章主要介紹了JavaScript 替換所有匹配內容,文中給大家提到了使用正則表達式替換方法,通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2020-02-02
  • Threejs與Tween.js結合創(chuàng)建動畫的詳細圖文教程

    Threejs與Tween.js結合創(chuàng)建動畫的詳細圖文教程

    three.js和tween.js可以一起使用,實現(xiàn)復雜的動畫效果,包括飛線動畫,這篇文章主要給大家介紹了關于Threejs與Tween.js結合創(chuàng)建動畫的相關資料,需要的朋友可以參考下
    2024-01-01
  • JavaScript數(shù)組的使用詳解

    JavaScript數(shù)組的使用詳解

    這篇文章主要介紹了JavaScript數(shù)組的使用方法,數(shù)組(Array)是有序的元素序列。若將有限個類型相同的變量的集合命名,那么這個名稱為數(shù)組名,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07

最新評論