Javascript Библиотека javascript Вертикальный и горизонтальный скроллинг фото (jquery+mbScrollable)

1997

Библиотека JAVASCRIPT SE@RCHER

Javascript + CSS :: • блок • текст • линк • меню • фото • окно • кнопка • фон • видео • таблица

HTML ↴ размер Kb

<!doctype html>

<META http-equiv=Content-Type content="text/html; charset=windows-1251">
  <title>Вертикальный и горизонтальный скроллинг фото (jquery+mbScrollable)</title>

#wrapper{
            display:none;
            margin:auto;
            margin-top:0px;
            width:600px;
        }

#myScroll .scrollEl{
            display:none;
            background:url("elements/elBgnd.png") repeat-x;
            border:1px solid #ddd;
            font-family:sans-serif;
            font-size:180%;
            color:white;
            height:600px;
            padding:10px;
            padding-top:0px;
            text-shadow:#999 1px 1px 1px;
            text-align:center;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
        }
        #myScroll1 .scrollEl{
            background:url("elements/elBgnd.png") repeat-x;
            border:1px solid #ddd;
            font-family:sans-serif;
            font-size:180%;
            padding:10px;
            padding-top:40%;
            color:white;
            height:100%;
            text-shadow:#999 1px 1px 1px;
            text-align:center;
        /*CSS3 properties*/
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }

#controls div, #controls1 div{
            font-family:sans-serif;
            margin-top:5px;
            background:#fff;
            display:inline-block;
            padding:6px;
            cursor:pointer;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-box-shadow:#999 2px 2px 2px;
            -webkit-box-shadow:#999 2px 2px 2px;
        }

#myScroll1{
            float:left;
            margin-right:20px;
        }

#controls .sel, #controls1 .sel{
            color:black !important;
            font-weight:bold;
        }
        #controls .disabled, #controls1 .disabled{
            color:gray;
        }
        #controls .page, #controls1 .page{
            padding:5px;
            color:gray;
        }
    </style>

$("#myScroll").mbScrollable({
                width:500,
				elementsInPage:1,
                elementMargin:2,
                shadow:"#999 2px 2px 2px",
                height:"auto",
                controls:"#controls",
                slideTimer:1000,
                autoscroll:true,
                scrollTimer:3000
            });

$("#myScroll1").mbScrollable({
                dir:"vertical",
                width:400,
                height:600,
                elementsInPage:3,
                elementMargin:6,
                shadow:"#999 2px 2px 2px",
                controls:"#controls1",
                slideTimer:200,
                autoscroll:false,
                scrollTimer:3000
            });

setTimeout(function(){$("#wrapper").fadeIn();},2000);
        });

</script>

</head>
<body>

<div id="wrapper">
     <div id="orizontal">
	  <div id="controls">
            <div class="first">first</div><div class="prev">prev</div>
            <div class="next">next</div><div class="last">last</div>
            <div class="pageIndex"></div>
            <div class="start">start</div><div class="stop">stop</div>
        </div>
         <div id="myScroll">
           <div class="scrollEl" style="background-color:#9999ff"><img src=../2012-8-84/pic/001.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#cc9900"><img src=../2012-8-84/pic/002.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#660066"><img src=../2012-8-84/pic/003.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#009966"><img src=../2012-8-84/pic/004.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#6600ff"><img src=../2012-8-84/pic/005.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#9999ff"><img src=../2012-8-84/pic/006.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#33cc00"><img src=../2012-8-84/pic/007.jpg alt=""></div>
            <div class="scrollEl" style="background-color:#cc00cc"><img src=../2012-8-84/pic/008.jpg alt=""></div>
        </div>

</div>

<div id="controls1">
            <div class="first">first</div><div class="prev">prev</div>
            <div class="next">next</div><div class="last">last</div><br>
            <div class="pageIndex"></div><br>
            <div class="start">start</div><div class="stop">stop</div>
        </div>
        <br>
        <br>
    </div>

</div>
<p><a href="2012-8-84-5.ZIP">2012-8-84-5.ZIP</a></p>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ПРИМЕР ↴

Javascript + CSS :: • до 2005 г. • 2006 г.• 2007 г.• 2008 г.• 2009 г. • 2010 г. • 2011 г. • 2012 г.

document.write(document.title)

HTML ↴ размер Kb

ПРИМЕР ↴