• Open API/Jquery

    jQuery Moodular - 이미지 회전,슬라이더, 터치 ,모자이크

    2016. 11. 10.

    by. Yo.

    728x90



    site : http://www.gougouzian.fr/


    Front & Back -end Developer

    Plugin & method Url : http://www.gougouzian.fr/projects/jquery/moodular/


    Test Url : http://www.uhoon.co.kr/test/885.html


    license : MIT License / GPL - GNU General Public License 



    이미지 슬라이드 , 회전 , 터치도 지원한다고 합니다. 


    대형 배너나 이미지슬라이드등에 용이할것같습니다.


    easing을 이용해서 다양한 effect를 지원하는 등..옵션이 상당히 많습니다.



    <!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>moodular </title>
</head>
<style type="text/css"> 
/* moodular */
#moodular { overflow: hidden }
    #moodular, #moodular li { margin: 0; padding: 0; list-style: none; width: 900px; }
/* examples */
    #moodular, #moodular li { height: 400px; }
        #moodular li p { display: block; height: 400px; }
            #moodular li p span { display: inline-block; padding: 10px 10px; color: #FFF; margin: 10px; }
#nav_wrapper { margin: 0; padding: 0; list-style: none; width: 80px; height: 20px; overflow: hidden }
    #nav_wrapper li { text-align: center; }
        #nav_wrapper li.active { color: #FFF; }
  
</style>  
<body>
 
<ul id="moodular">
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo01.jpg);"><span>가나다라</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo02.jpg);"><span>마바사아</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo03.jpg);"><span>자차카</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo04.jpg);"><span>타파하</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo05.jpg);"><span>www.goodkiss.co.kr</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo06.jpg);"><span>www.uhoon.co.kr</span></p></li>
</ul>  
<!-- script -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script src="885/jquery.easing.1.3.js"></script> 
<script src="885/moodular.js"></script>  
<script>
jQuery(document).ready(function () { 
    var couleurs = ["rgba(219,56,92, 0.6)"  ,
    "rgba(104,197,255, 0.6)",
    "rgba(151,90,193, 0.6)",
    "rgba(193,70,136, 0.6)",
    "rgba(168,123,187, 0.6)",
    "rgba(41,186,116, 0.6)",
    "rgba(148,189,36, 0.6)",
    "rgba(240,61,44, 0.6)",
    "rgba(56,155,217, 0.6)",
    "rgba(32,187,185, 0.6)", 
    "rgba(32,169,255, 0.6)"];
 
    jQuery('#moodular li p span').each(function() {
        jQuery(this).css('background-color', couleurs[Math.floor(Math.random() * couleurs.length)]);
    });
 
    jQuery('#moodular').moodular({
/* core parameters */
    // effects separated by space
    effects: 'mosaic',
    // controls separated by space
    controls: 'keys',
    // if you want some yummy transition
    easing: 'easeOutExpo',
    // step 
    step: 1,
    // selector is to specify the children of your element (tagName)
    selector: 'li',
    // if timer is 0 the carrousel isn't automatic, else it's the interval in ms between each step
    timer: 5000,
    // speed is the time in ms of the transition
    speed: 5000,
    // queuing animation ?
    queue: false,
/* parameters for controls or effects */
    // keys control
    keyPrev: 37, // left key
    keyNext: 39, // right key
    // mosaic effects
    slices: [10, 4],
    mode : 'random'//,
    // others
    //your_params : 'cause you can create your own effect or control'
  }); 
});
</script>
</body>
</html>
    728x90
    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바