滑鼠滑過移出移入變換圖片文字 Jquery網頁特效演示範例 demo及語法 ~ 哈拉999 互動式創意網頁設計

天堂特快車

預定10月10日隆重上映，敬請期待！

夢幻屋

好事將近！

天堂特快車

預定10月10日隆重上映，敬請期待！

夢幻屋

好事將近！

天堂特快車

預定10月10日隆重上映，敬請期待！

夢幻屋

好事將近！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>monga</title>
 <style type="text/css">
    #wrapper01 {
    width: 980px;/*控制所有圖片的寬度*/
    height: 450px; /*控制所有圖片的高度*/
    overflow: hidden;
    position: relative;
    left: 0px;
    top: 0px;
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
    
    padding: 0;
    margin: 0;
   }
   #wrapper01 * {
    color: #ccc;
   }

#wrapper01 .carousel {
    display: block;
    float: left;
    width: 265px;
    height: 250px;
    margin: 0 25px 10px 35px;
    
   }
   #wrapper01 .carousel img {
    display: block;
   }
   #wrapper01 .carousel div {
    background-color: black;
    width: 265px;
    height: 250px;
    /*控制標題及內文的寬度及高度*/
   }
   #wrapper01 .carousel div h3 {
    width: 265px;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
   }
   #wrapper01 .carousel div p {
    width: 265px;
    height: 160px;
    margin: 0;
   }
   
   #donate-spacer {
    height: 100%;
   }
   #donate {
    border-top: 1px solid #999;
    width: 580px;
    padding: 50px 75px;
    margin: 0 auto;
    overflow: hidden;
   }
   #donate p, #donate form {
    margin: 0;
    float: left;
    width: 265px;
   }
  </style>
</head>
<body><div id="wrapper01">
   <a href="http://hala999.net">
     <div class="carousel">    
      <img src="http://goo.gl/9DAvAH" alt="car1" width="265" height="200" />
     <div >
     <h3>天堂特快車</h3>
     <p><img width="175" height="100" src="http://goo.gl/9DAvAH" /><br />預定10月10日隆重上映，敬請期待！</p>                   
    </div> 
    </div>
   </a>
            
  <a href="http://hala999.net">
     <div class="carousel">    
      <img src="http://goo.gl/rKVhdD" alt="car2" width="265" height="200" />
     <div>
     <h3>夢幻屋</h3>
     <p><img src="http://goo.gl/rKVhdD" alt="car2" width="200" height="125" /><br />好事將近！ </p>
    </div>
    </div>
  </a>

<a href="http://hala999.net">
     <div class="carousel">    
      <img src="http://goo.gl/9DAvAH" alt="car1" width="265" height="200" />
     <div >
     <h3>天堂特快車</h3>
     <p><img width="175" height="100" src="http://goo.gl/9DAvAH" /><br />預定10月10日隆重上映，敬請期待！</p>                   
    </div> 
    </div>
   </a>
            
  <a href="http://hala999.net">
     <div class="carousel">    
      <img src="http://goo.gl/rKVhdD" alt="car2" width="265" height="200" />
     <div>
     <h3>夢幻屋</h3>
     <p><img src="http://goo.gl/rKVhdD" alt="car2" width="200" height="125" /><br />好事將近！ </p>
    </div>
    </div>
  </a>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

猛甲茶道

哈拉999

哈拉999 互動式創意網頁設計

2013年10月17日星期四