利用jquery實現根據圖像位置變換陰影角度代碼



33 129 44



特效描述:利用jquery實現 根據圖像位置 變換陰影角度,利用jquery實現根據圖像位置變換陰影角度代碼

代碼結構

1. 引入CSS

<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/init.js"></script>

3. HTML代碼

  <div id="demo-bar" class="bottom right"></div>
  <div class="container">
    <div class="grid-container blue">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
    <div class="grid-container red">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
    <div class="grid-container yellow">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
    <div class="grid-container green">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
    <div class="grid-container purple">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
    <div class="grid-container orange">
      <div class="shadow-box">
        <div class="content">
        </div>
        <div class="shadows">
          <div class="shadow top"></div>
          <div class="shadow bottom"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Javascript -->
  <script> 
    $(function(){
      $("#demo-bar").load("../demo-bar.html"); 
    });
  </script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表