開発メモ

開発用のメモです。

スムーズスクロール

<link rel="stylesheet" href="/plugin/DetailPhotoBloc/tkahn-smooth-div-scroll/css/smoothDivScroll.css" />
<script src="/tkahn-smooth-div-scroll/js/jquery-ui-1.10.3.custom.js"></script>
<script src="/tkahn-smooth-div-scroll/js/jquery.kinetic.min.js"></script>
<script src="/tkahn-smooth-div-scroll/js/jquery.mousewheel.min.js"></script>
<script src="/tkahn-smooth-div-scroll/js/jquery.smoothdivscroll-1.3-min.js"></script>

<style type="text/css">

    #makeMeScrollable
    {
        width:  90%;
        height: 80px;
        position: relative;
    }
    
    /* Replace the last selector for the type of element you have in
       your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
       if you have links use #makeMeScrollable div.scrollableArea a and so on. */
    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    div.scrollingHotSpotLeft, div.scrollingHotSpotRight {
        min-width : 20px;
        width : 20px;
    }
</style>
<div id="makeMeScrollable">
    <div class="scrollableArea">
        <img src="path" />
        <img src="path" />
        <img src="path" />
        <img src="path" />
        <img src="path" />
        <img src="path" />
        <img src="path" />
        <img src="path" />
    </div>
</div>
Twitter: @asahina_alice