Tạo slide đẹp giống haloshop.vn

Thảo luận trong 'Style & Template Questions' bắt đầu bởi MeoHoang2009, 23/9/13.

1votes
5/5, 1 vote

  1. MeoHoang2009

    MeoHoang2009 Member

    Bài viết:
    292
    Likes :
    61
    MeoHoang2009, 23/9/13
    #1
    Bài viết cũ hơn
    Bài viết mới hơn
    Đang tải...
    Recommended:X
  2. MeoHoang2009

    MeoHoang2009 Member

    Bài viết:
    292
    Likes :
    61
    co ai ko vay ta? Cao nhân dau hết rồi
     
    MeoHoang2009, 23/9/13
    #2
  3. hacobi1102

    hacobi1102 Member

    Bài viết:
    145
    Likes :
    76
    hacobi1102, 23/9/13
    #3
  4. MeoHoang2009

    MeoHoang2009 Member

    Bài viết:
    292
    Likes :
    61
    cũng như không. mình lam duoc là mình tự làm rồi.
     
    MeoHoang2009, 23/9/13
    #4
  5. NangCaoIt.com

    NangCaoIt.com New Member

    Bài viết:
    57
    Likes :
    7
    tặng bạn nhé !
    lúc trước cũng thích nó !
    nhưng cái này mình lấy của TenTen.vn
    bạn xem code nhé !
    luu thành file index để xem rõ hơn !
    Mã:
    <link rel="stylesheet" href="http://tenten.vn/Content/css/banner_onamae1.css"><script type="text/javascript" src="http://tenten.vn/Scripts/jquery-1.4.2.min.js"></script><div id="sale">            <!--<img src="http://tenten.vn/Content/images/sale.png" alt="tenten"/>-->            <script src="http://tenten.vn/Scripts/omanae.js" type="text/javascript"></script>   
    <script type="text/javascript">jQuery(document).ready(function() {    jQuery('#accordion1').accordionza({        autoPlay: true,        captionDelay: 1000,        captionEasing: 'easeOutBounce',        captionHeight: 40,        captionHeightClosed: 10,        navKey: true,        slideDelay: 4000,        slideTrigger: 'mouseover'    });
});    </script>            <!-- Start HTML: Accordion Demo #1 -->            <ul id="accordion1" style="overflow: hidden; position: relative;">                <li class="slide1 slide_opened" style="position: absolute; top: 0px; width: 810px; height: 168px; left: 0px;">                    <div class="slide_handle"></div>                                                              <div class="slide_content">                        <a href="http://tenten.vn/campaign/khuyen-mai-asia-chi-100K-tang-tai-nghe/&amp;code=banner2SUuQqZrPPD&amp;idCampain=35"><img alt="ten mien" width="761" height="168" src="http://tenten.vn/Content/images/banner/tenmien.png"></a>                        </div>                                                        </li>                <li class="slide2" style="position: absolute; top: 0px; width: 810px; height: 168px; left: 810px;">                    <div class="slide_handle1"><!--<div></div>--></div>                    <div class="slide_content">                        <a href="http://tenten.vn/hosting-chat-luong-cao"><img alt="hosting" width="761" height="168" src="http://tenten.vn/Content/images/banner/hosting.png"></a>                    </div>                </li>                <li class="slide3" style="position: absolute; top: 0px; width: 810px; height: 168px; left: 860px;">                    <div class="slide_handle2"></div>                    <div class="slide_content">                        <a href="http://tenten.vn/Registration/displayVpsPrice/Vps"><img alt="may chu ao" width="761" height="168" src="http://tenten.vn/Content/images/banner/vps.png"></a>                    </div>                </li>                <li class="slide4" style="position: absolute; top: 0px; width: 810px; height: 168px; left: 910px;">                    <div class="slide_handle3"></div>                    <div class="slide_content">                        <a href="http://tenten.vn/hosting-chat-luong-cao"><img alt="khuyen mai" width="761" height="168" src="http://tenten.vn/Content/images/banner/baokim.png"></a>                    </div>                </li>            </ul>            <!-- End HTML: Accordion Demo #1 -->        </div>
     
    NangCaoIt.com, 23/9/13
    #5
    MeoHoang2009 thích bài này.
  6. Antrach

    Antrach New Member

    Bài viết:
    35
    Likes :
    3
    Ctrl + U
     
    Antrach, 23/9/13
    #6
    hacobi1102 thích bài này.
  7. hacobi1102

    hacobi1102 Member

    Bài viết:
    145
    Likes :
    76
    Mở code trang demo kia ra, lấy file js, css, code embed RIP.
    Nếu bạn ko làm được thì chờ tí rảnh mình RIP lại cho
     
    hacobi1102, 23/9/13
    #7
  8. NangCaoIt.com

    NangCaoIt.com New Member

    Bài viết:
    57
    Likes :
    7
    cai code minh đua đã giong 100% rùi
     
    NangCaoIt.com, 23/9/13
    #8
  9. sanvu88

    sanvu88 Well-Known Member

    Bài viết:
    1,048
    Likes :
    467
    rip xong roài :D đợi xíu để nén lại rồi mình up lên cho
     
    sanvu88, 23/9/13
    #9
  10. sanvu88

    sanvu88 Well-Known Member

    Bài viết:
    1,048
    Likes :
    467
    Tạo temp slide

    Mã:
    <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyAccordion.js"></script>
<script type="text/javascript" src="js/utility.js"></script>
<div id="accordion-1">
            <dl class="easy-accordion">
                <dt class="" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 0px;">First slide<span class="slide-number" style="bottom: 0px;">01</span></dt>
                <dd class="" style="left: 46px; width: 470px; height: 193px; display: block;"><h2>This is the first slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img1.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="hover" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 46px;">Second slide<span class="slide-number" style="bottom: 0px;">02</span></dt>
                <dd class="" style="width: 470px; height: 193px; left: 92px; display: block;"><h2>Here is the second slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img2.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="no-more-active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 92px;">One more slide<span class="slide-number" style="bottom: 0px;">03</span></dt>
                <dd class="no-more-active" style="width: 470px; height: 193px; left: 138px; display: block;"><h2>One more slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img3.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 563.8135759599547px;">Another slide<span class="slide-number" style="bottom: 0px;">04</span></dt>
                <dd class="active" style="width: 470px; height: 193px; left: 616.1553886625081px; display: block;"><h2>Another slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img4.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 708px;" class="">Wow one more<span class="slide-number" style="bottom: 0px;">05</span></dt>
                <dd style="width: 470px; height: 193px; left: 754px; display: block;" class=""><h2>Unbilievable one more slide here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img5.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 754px;" class="">Last one<span class="slide-number" style="bottom: 0px;">06</span></dt>
                <dd style="width: 470px; height: 193px; left: 800px; display: block;" class=""><h2>This is definitely the last one</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img6.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
            </dl>
        </div>
    Ném cái này vào extra.css

    Mã:
    /* Begind slide */
html {
    font-size: 62.5%;
}
body {
    color: #294F88;
    font-size: 1.2em;
}
.sample {
    background: none repeat scroll 0 0 #D7E7FF;
    border: 1px solid #92CDEC;
    margin: 30px;
    padding: 30px;
}
h1 {
    font-size: 2em;
    margin: 0 0 20px;
    padding: 0;
}
h2 {
    font-size: 1.6em;
    margin: 40px 0 20px;
    padding: 0;
}
.easy-accordion h2 {
    font-size: 1.6em;
    margin: 0 0 20px;
    padding: 0;
}
p {
    font-size: 1.2em;
    line-height: 170%;
    margin-bottom: 20px;
}
.easy-accordion {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.easy-accordion dt, .easy-accordion dd {
    margin: 0;
    padding: 0;
}
.easy-accordion dt, .easy-accordion dd {
    position: absolute;
}
.easy-accordion dt {
    cursor: pointer;
    margin-bottom: 0;
    margin-left: 0;
    transform: rotate(-90deg);
    transform-origin: 20px 0 0;
    z-index: 5;
}
.easy-accordion dd {
    opacity: 0;
    overflow: hidden;
    z-index: 1;
}
.easy-accordion dd.active {
    opacity: 1;
}
.easy-accordion dd.no-more-active {
    opacity: 1;
    z-index: 2;
}
.easy-accordion dd.active {
    z-index: 3;
}
.easy-accordion dd.plus {
    z-index: 4;
}
.easy-accordion .slide-number {
    bottom: 0;
    font-size: 1.1em;
    font-weight: normal;
    left: 10px;
    position: absolute;
    transform: rotate(90deg);
}
dd p {
    line-height: 120%;
}
#accordion-1 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #B5C9E8;
    height: 245px;
    padding: 30px;
    width: 800px;
}
#accordion-1 dl {
    height: 245px;
    width: 800px;
}
#accordion-1 dt {
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-inactive-1.jpg") no-repeat scroll 0 0 #FFFFFF;
    color: #26526C;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    height: 46px;
    letter-spacing: 1px;
    line-height: 44px;
    padding: 0 15px 0 0;
    text-align: right;
    text-transform: uppercase;
}
#accordion-1 dt.active {
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-active-1.jpg") no-repeat scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
}
#accordion-1 dt.hover {
    color: #68889B;
}
#accordion-1 dt.active.hover {
    color: #FFFFFF;
}
#accordion-1 dd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide.jpg") repeat-x scroll left bottom transparent;
    border-color: #DBE9EA #DBE9EA #DBE9EA -moz-use-text-color;
    border-image: none;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
    margin-right: 3px;
    padding: 25px;
}
#accordion-1 .slide-number {
    color: #68889B;
    font-weight: bold;
    left: 10px;
}
#accordion-1 .active .slide-number {
    color: #FFFFFF;
}
#accordion-1 a {
    color: #68889B;
}
#accordion-1 dd img {
    float: right;
    margin: 0 0 0 30px;
}
#accordion-1 h2 {
    font-size: 2.5em;
    margin-top: 10px;
}
#accordion-1 .more {
    display: block;
    padding-top: 10px;
}
/* End slide */
    Chèn code

    Mã:
    <xen:include template="slide" />
    Vào vị trí muốn hiển thị
    Download đính kèm up lên host

    Demo

    sshot-1

    còn lại bạn tự làm nốt nhé
     

    Các file đính kèm:

    • js.zip
      Kích thước:
      21.6 KB
      Đọc:
      43
    sanvu88, 23/9/13
    #10
    MeoHoang2009, TieuPhongCB and Mất Tự Do like this.
  11. TieuPhongCB

    TieuPhongCB New Member

    Bài viết:
    23
    Likes :
    0
    Good :-bd. Nhưng đụng js với XenTag Mod 1.1 :D
     
    TieuPhongCB, 24/9/13
    #11
  12. sanvu88

    sanvu88 Well-Known Member

    Bài viết:
    1,048
    Likes :
    467
    Đụng js nào vậy bạn, mình không dùng xentag mod nên không rõ
     
    sanvu88, 24/9/13
    #12
  13. tamansu

    tamansu Verified User

    Bài viết:
    20
    Likes :
    2
    Help me đã làm theo hướng dẫn
    nhưng nó ko hiện ra ngoài
    xin giúp mình
    chân thành cảm ơn
     
    tamansu, 10/10/13
    #13
comments powered by Disqus
: slide

Chia sẻ trang này

Đang tải...