Mãi Không Quên

cộng đồng teen

  • Thống kê diễn đàn


Khung giới thiệu thông tin chạy ảnh mượt

 :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

View previous topic View next topic Go down

Khung giới thiệu thông tin chạy ảnh mượt Empty Khung giới thiệu thông tin chạy ảnh mượt

Post by Bui Minh Phong™ 2/6/2013, 8:22 pm

demo: [You must be registered and logged in to see this link.]
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
             

        <!-- include javascript -->
        <script type="text/javascript" src="http://gvns.forum.st/10794.js"></script>
        <script type="text/javascript" src="http://gvns.forum.st/11846.js"></script>
        <script type="text/javascript" src="http://gvns.forum.st/12877.js"></script>       
        <!-- end include js-->
<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

<style type="text/css">
.kg
{
    background: #FFFFFF;
    border: 1px solid #84847C;
    padding: 3px 3px 3px 3px;
    margin: 1px 1px 1px 1px;
}
.kg2
{
   -moz-border-radius: 0.2em;
    background: #FFFFFF;
    border: 1px dashed #84847C;
    padding: 1px 1px 1px 1px;

}
table{
border-collapse:collapse;border:0
}

      td, th {
         margin:.1em;
         padding:.1em;
         border:0px;
      }
   
   body {
    font: 13px Tahoma, Arial, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    line-height: 19px;
}
.topnews_slideshow_wrapper{float:left;width:190px;height:200px;position:relative;}

/* quybv add css for slideshow */
  #topnew_slideshow .topnews_slideshow {position: absolute;}
/* end css for slideshow */
 
  .topnews_slideshow .topnews_photo{width:190px;height:120px;overflow:hidden;}
  .topnews_slideshow h2,.topnews_slideshow .topnews_desc{background-color:#000000;overflow:hidden;}
  .topnews_slideshow h2{display:block;font-weight:bold;font-size:12px;line-height:normal;padding:5px 5px 5px 5px;height:32px;overflow:hidden;}
  .topnews_slideshow h2 a,.topnews_slideshow h2 a:hover{text-decoration:none;}
  .topnews_slideshow .topnews_desc{line-height:16px;padding:0 8px 10px;}
  .topnews_slideshow .topnews_desc p{display:block;height:112px;overflow:hidden;color:#FFFFFF;}
  .topnews_slideshow_btns{position:absolute;top:290px;right:10px;width:33px;}

/* Typical Event list */
</style>


    </head>
    <body>
        <div class="news_header">

        <!-- begin: Body site -->
        <div class="znews_body">
            <div class="znews_cont_wrapper">
      
         <table><tr><td align="left">
           <a href="javascript:znSlideshow.clickPrev('topnew_slideshow')" class="prev_btn icn" title="Prev"><img src="http://4r.ninja9x.net/sidebar/back.png" width="40"/></a>
           </td>
           <td width="105px"></td>
           <td align="right">
        <a href="javascript:znSlideshow.clickNext('topnew_slideshow')" class="next_btn icn" title="Next"><img src="http://4r.ninja9x.net/sidebar/next.png" width="40"/></a>
    </td></tr></table>
                <!-- begin: Home left column -->
                <div class="znews_leftcol">
               
                    <!-- begin: Typical events -->
                    <div class="typical_news">
                        <!-- begin: Left Slideshow -->
                        <div id="topnew_slideshow" class="topnews_slideshow_wrapper">
                <div class="topnews_slideshow" id="topnew_slideshow_1">
                <div class="topnews_photo">

<center><TABLE BORDER="0">
<TR> <TD ROWSPAN="3"> <FONT face="Arial,Helvetica" size="1">
<p id="socialicons" class="kg"><img src="http://img.msg.yahoo.com/avatar.php?yids="nobita_xai_nokia_chay_atila"/>
</p></TD> <TD WIDTH="100" align="center"> <FONT size="2"><font color="red"><b>Jackki</b></font></TD> </TR>
<TR> <TD> <div class="kg2" align="center"><FONT size="1"><img border="0" src="http://presence.msg.yahoo.com/online?u=nobita_xai_nokia_chay_atila&m=g&t=5&l=us"> <a href="ymsgr:sendIM?nobita_xai_nokia_chay_atila">Jackki</a></div></TD> </TR>
<tr><td><div class="kg2" align="center"><FONT size="1">Đến Từ:<br>HCM</font></div></td></tr>


</TABLE>
            </div>
                <h2><center><a href="http://congdongteen.forum.st/forum" target="_blank"><font color="#FFFFFF">Sáng Lập Viên</font></a></center></h2>
                <div class="topnews_desc"><p>Người Đã Tạo Ra Diễn Đàn,Fix Lỗi Nâng Cấp Nghiên Cứu Để Diễn Ngày Càng Lớn Mạnh</p></div>
            </div>
                    <div class="topnews_slideshow" id="topnew_slideshow_3">
                <div class="topnews_photo">



            <TABLE BORDER="0">
<TR> <TD ROWSPAN="3"> <FONT face="Arial,Helvetica" size="1">
<p id="socialicons" class="kg"><img src="http://img.msg.yahoo.com/avatar.php?yids=siu.super_chiyeuminhem"/>
</p></TD> <TD WIDTH="100" align="center"> <FONT size="2"><font color="red"><b>Nhó¢ Topieeª°³</b></font></TD> </TR>
<TR> <TD> <div class="kg2" align="center"><FONT size="1"><img border="0" src="http://presence.msg.yahoo.com/online?u=thienthan_acma05&m=g&t=5&l=us"> <a href="ymsgr:sendIM?siu.super_chiyeuminhem">Nhó¢ Topieeª°³</a></div></TD> </TR>
<tr><td><div class="kg2" align="center"><FONT size="1">Đến Từ:<br>HCM</font></div></td></tr>


</TABLE>

         
            </div>
                <h2><center><a href="http://www.a6-family.net/" target="_blank"><font color="#FFFFFF">Admin Kỹ Thuật</font></a></center></h2>
                <div class="topnews_desc"><p> Nhó¢ Topieeª°³ Đã Giúp Rất Nhiều Cho Diễn Đàn EminemFc.Us.To, Nhó¢ Topieeª°³ Đã Giúp Admin Khắc Phục Nhiều Lỗi Của Diễn Đàn....</p></div>
            </div>
                    <div class="topnews_slideshow" id="topnew_slideshow_2">
                <div class="topnews_photo">
            
            <TABLE BORDER="0">
<TR> <TD ROWSPAN="3"> <FONT face="Arial,Helvetica" size="1">
<p id="socialicons" class="kg"><img src="http://img.msg.yahoo.com/avatar.php?yids=baotranno123"/>
</p></TD> <TD WIDTH="100" align="center"> <FONT size="2"><font color="red"><b>Admin Baotranno123</b></font></TD> </TR>
<TR> <TD> <div class="kg2" align="center"><FONT size="1"><img border="0" src="http://presence.msg.yahoo.com/online?u=baotranno123&m=g&t=5&l=us"> <a href="ymsgr:sendIM?baotranno123">baot...</a></div></TD> </TR>
<tr><td><div class="kg2" align="center"><FONT size="1">Đến Từ<br>HCM</font></div></td></tr>


</TABLE>
            </div>
                <h2><center><a href="/u5" target="_blank"><font color="#FFFFFF">Admin Design + Quản Lý Forum</font></a></center></h2>
                <div class="topnews_desc"><p>Người Thiết Kế Rank Share Các Skin Cho Diễn Đàn ,baotranno123 đã làm thiết kế rank cho diễn đàn....</p></div>
            </div> </center>

     

</div>

<script type="text/javascript">
    zm.ready(function(){
        znSlideshow.startshow('topnew_slideshow', 1, 10000);
    });
</script>
                   
                    </div>
   
                   
 
    </body>
</html>
view thôi, sửa lại cho hợp nhé.
code vào html
Bui Minh Phong™
Bui Minh Phong™
Quản Trị Cấp Cao
Quản Trị Cấp Cao

Posts : 3260
Points : 370362
Thanked : 1927
Birthday : 1994-12-18
Status Hãy Lặng Yên Để Cảm Nhận Tình Yêu Xung Quanh Bạn :x
Giới tính : Male Rất dễ thương

Back to top Go down

Khung giới thiệu thông tin chạy ảnh mượt Empty Re: Khung giới thiệu thông tin chạy ảnh mượt

Post by vippro 7/4/2014, 8:21 am

thank
vippro
vippro
Thành Viên Đồng
Thành Viên Đồng

Posts : 270
Points : 188452
Thanked : 8
Birthday : 1995-01-10
Status ffg
Giới tính : Male

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

Mãi Không Quên :: PHẦN MỀM- MÁY TÍNH- INTERNET :: Web- Forumotion :: Hướng dẫn- Code

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