利用jquery实现根据图像位置变换阴影角度代码



29 113 38



特效描述:利用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

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