» Công Nghệ Thông Tin » Chinh Phục Forumtion » Các Code Hay » code slide ảnh dạng tap


You are not connected. Please login or register

code slide ảnh dạng tap

Go down  Message [Page 1 of 1]

1 code slide ảnh dạng tap on Sat Jul 14, 2012 11:24 am

An Hùng BMT

avatar
Admin
Admin

css
Code:
ul.sidenav {
        font-family: Verdona;
        font-size: 15px;
        width: 200px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul.sidenav li a {
        display: block;
        color: #000!important;
        text-decoration: none;
        width: 155px;
        padding: 7px 0px 0px 25px;
        background: url(http://i25.servimg.com/u/f25/14/45/99/41/contro11.png) no-repeat 5px 7px;
    }
    ul.sidenav li a:hover {
        background: url(http://i25.servimg.com/u/f25/14/45/99/41/contro10.png) no-repeat 5px 7px;
    }
    ul.sidenav li span {
        display: none;
    }
    ul.sidenav li a:hover span {
        display: block;
        font-size: 10px;
        padding: 2px 0;
        font-family: Georgia;
        color: grey;
    }

         
    .accordion {
      text-align:left;
      font:'Helvetica Neue', Verdana, Arial, sans-serif;
    }
    .accordion ol {
      position: relative;
      overflow: hidden;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .accordion li > h2 {
      color: black;
      font-weight: normal;
      margin: 0;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: translateX(-100%) rotate(-90deg);
      -webkit-transform-origin: right top;
      -moz-transform: translateX(-100%) rotate(-90deg);
      -moz-transform-origin: right top;
      -o-transform: translateX(-100%) rotate(-90deg);
      -o-transform-origin: right top;
      -ms-transform: translateX(-100%) rotate(-90deg);
      -ms-transform-origin: right top;
      transform: translateX(-100%) rotate(-90deg);
      transform-origin: right top;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
    .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
    .accordion li > h2:hover { cursor: pointer; }
    .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
    .accordion noscript p { padding: 10px; margin: 0; background: white; }
   
    /****************************************** Basic */
    .basic li > h2 { background: #333; color: white; line-height: 1.8em; }
    .basic li > div h3 { margin: 15px 10px; }
    .basic li > div p { margin: 10px; font-size: 14px; }
   
    /****************************************** Dark */
    .dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
      box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
    .dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
    .dark li > h2 span { background: #353535; color: white; }
    .dark li > h2 b { background: #3535359; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
    .dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
    .dark h2.selected b { background: #4343439; }
    .dark li > div { background: #030303; margin-left: 5px; }
   
    /*************************************** Rounded */
    .rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
    .rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
   
    /***************************************** Light */
    /**************************************** Stitch */

    #s1 {
    background:url("https://lh5.googleusercontent.com/-s7sgVU4JAu4/T8YMWXNNn-I/AAAAAAAAAHk/3pjjpm6-6YA/s640/C360_2012-05-26-09-03-28.jpg") no-repeat #030303;
    }
    #s2 {
    background:url("https://lh4.googleusercontent.com/-dUV1PleEWH0/T8YHEy6mgQI/AAAAAAAAAFg/E3aSUPDZQ7g/s640/2012-05-26%252011.21.01.jpg") no-repeat #030303;
    }
    #s3 {
    background:url("https://lh4.googleusercontent.com/-AvVfTPI5sBk/T8YAKgxzHkI/AAAAAAAAAPU/7C-ArNZE0PU/s640/C360_2012-05-26-09-11-22.jpg") no-repeat #030303;
    }

    #s4 {
    background:url("https://lh6.googleusercontent.com/-B-dMK9YpbsY/T8X_9wgd5cI/AAAAAAAAAPY/kVtUKk7e5FY/s640/C360_2012-05-26-12-42-13.jpg") no-repeat #030303;
    }

    #s5 {
    background:url("https://lh4.googleusercontent.com/-7B4IgNWCqtQ/T8dIDtlaYvI/AAAAAAAAAMU/9-y559wT7pQ/s640/2012-05-19%252016.58.24.jpg") no-repeat #030303;
    }

index_body
Code:
<div class="main"><div id="pun-announcement"><p><object width="1" height="1"><param name="movie" value="http://www.nhaccuatui.com/m/6Y5pCmZCYI"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="flashvars" value="&amp;autostart=true"><embed src="http://www.nhaccuatui.com/m/6Y5pCmZCYI" quality="high" wmode="transparent" type="application/x-shockwave-flash" flashvars="&amp;autostart=true" width="1" height="1"></object>
    </p><div id="one" class="accordion dark rounded" style="height: 320px; width: 890px; ">
        <ol>
            <li>
                <h2 style="width: 320px; height: 48px; left: 0px; " class=""><span class="collapse" style="float:right" id="fmvicollapse0"><a href="javascript:void(0);" alt="fmClose"><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"></a><a href="javascript:void(0);" style="display:none" alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"></a></span><span>Slide One</span><b>1</b></h2>
                <div id="s1" style="width: 650px; left: 0px; padding-left: 48px; "></div>
            </li>
            <li>
                <h2 style="width: 320px; height: 48px; left: 85.77617022117454px; " class="selected"><span class="collapse" style="float:right" id="fmvicollapse1"><a href="javascript:void(0);" alt="fmClose" style="display: inline; "><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"></a><a href="javascript:void(0);" style="display: none; " alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"></a></span><span>Slide Two</span><b>2</b></h2>
                <div id="s2" style="width: 650px; left: 85.77617022117454px; padding-left: 48px; "></div>
            </li>
            <li>
                <h2 style="width: 320px; height: 48px; left: 746px; " class=""><span class="collapse" style="float:right" id="fmvicollapse2"><a href="javascript:void(0);" alt="fmClose" style="display: inline; "><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"></a><a href="javascript:void(0);" style="display: none; " alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"></a></span><span>Slide Three</span><b>3</b></h2>
                <div id="s3" style="width: 650px; left: 746px; padding-left: 48px; "></div>
            </li>
            <li>
                <h2 style="width: 320px; height: 48px; left: 794px; " class=""><span class="collapse" style="float:right" id="fmvicollapse3"><a href="javascript:void(0);" alt="fmClose"><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"></a><a href="javascript:void(0);" style="display:none" alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"></a></span><span>Slide Four</span><b>4</b></h2>
                <div id="s4" style="width: 650px; left: 794px; padding-left: 48px; "></div>
            </li>
            <li>
                <h2 style="width: 320px; height: 48px; left: 842px; " class=""><span class="collapse" style="float:right" id="fmvicollapse4"><a href="javascript:void(0);" alt="fmClose"><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"></a><a href="javascript:void(0);" style="display:none" alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"></a></span><span>Slide Five</span><b>5</b></h2>
                <div id="s5" style="width: 650px; left: 842px; padding-left: 48px; "></div>
            </li>
        </ol>
        <noscript style="display: inline-block; ">
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript>
    </div><p></p></div></div>



Facebook: www.Facebook.com/AnHungMedia
Website: www.anhungbmt.com

Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum