利用jQuery CSS3实现模拟WIN8卡片式UI



10 37 13



特效描述:利用jQuery CSS3实现 模拟WIN8 卡片式UI,利用jQuery CSS3实现模拟WIN8卡片式UI

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="script/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="script/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script/script.js">	</script>

3. HTML代码

<div class="wrapper">
      <div class="header">
            <h1>Imitative WIN8 WEB UI</h1> 
            <div id="start"><img src="images/MS WINDOWS 7.A.png" width="64"/></div>
      </div> 
      <div id="startMenu">
            <ul>
                <li><img src="images/HOME.png" />HOME</li>
                <li><img src="images/TASKS_A.png" />TASKS</li>
                <li><img src="images/TOOLS.png" />TOOLS</li>
                <li><img src="images/SEARCH.png" />SEARCH</li>
                <li><img src="images/PLAYER.png" />PLAYER</li>
            </ul>
      </div>
      <div class="container"> 		
          <!--***************
          <div class="toolset">
              <img  class="tool" src="images/search.jpg">
              <img  class="tool" src="images/order.jpg">
              <img  class="tool" src="images/news.jpg">	
              <img  class="tool" src="images/ask.jpg">
          </div>
          ****-->
          <div class="boxgridSet">
                  <!--****************slidedown****************-->
                  <div class="box slidedown">
                      <div class="search" style="display:none">
                          <label>INPUT</label><input type="text" />
                      </div>
                      <div class="boxgrid ">                
                           <h3>SEARCH</h3>
                           <div class="content">
                           <p>info, mes, ads</p>	
                            <img src="images/map.jpg" width="300px" height="200px"/>
                            </div>
                      </div>            
                  </div>
                  <!--**************** slideright****************-->   
                  <div class="box slideleft"> 
                      <div  class="news" style="display:none"></div>
                      <div class="boxgrid" style="background:#B0EB17">          
                          <h3>SETTING</h3>
                          <div class="content" style="background:#B0EB17">     
                          <p>Photographer<br/><a href="#/" target="_BLANK"></a></p>
                          <img src="images/SETTINGS.png"style="margin:30px"  />
                          <img src="images/pointer.png" style="margin:50px 200px " />
                          </div>
                      </div>
                  </div>
                  <div class="box right">
                         <img id="target" src="images/FILE - MOVIE.png" />
                         <img id="coffee" src="images/INTERNET EXPLORER - ALT.png" />
                  </div>    
                  <!--**************** thecombo****************-->   
                  <div class="box slideright">
                      <div  class="news2" style="display:none">
                      </div>
                      <div class="boxgrid" style="background:#39AB3E";>                 
                          <h3>CONTACT</h3>
                          <div class="content" style="background:#39AB3E">
                          <p>Graphic Designer<br/><a href="#" target="_BLANK">More Info</a></p>
                          <img id="me" src="images/me.gif" />
                          <img src="images/BLUETOOTH.png" style="margin:-10px 90px;" />
                          </div>
                      </div>
                  </div>
                  <!--**************** peek****************-->  
                  <div class="box">
                      <div class="boxgrid peek" style="background:#8F2145">
                          <a href="#"><img src="images/birss.jpg"/></a>
                          <a href="#"><img class="cover" src="images/facebook.gif"/></a>
                      </div>
                  </div>
          </div>
          <div class="clear"></div>
		</div>	
        <div class="footer"></div>
   </div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩展开 展开收缩 收缩 展开 放大缩小 变大变小 放大 缩小 变大 变小 缩放 缩放切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片收缩展开 图片收缩 图片展开
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到