您的位置：首页 > Web前端 > JQuery

jquery float div开发实例

2012-06-09 17:58 169 查看
具体的功能要求是这样的：

有一个div块，应该随着鼠标向下拉，向下

<style type="text/css">
  #floating-box{
    float:right;
    margin-left:720px;
    margin-right:10px;
    position:absolute;
    z-index:1;
  }
</style>
<script type="text/javascript">
   
  //avoid conflict with other script
           
$(document).ready(function($) {
    $(".circlelist ul li").click(function(){
      var href = $(this).children("span").children("a").attr("href");
      window.location = href; 
    });

    var $floatingbox = $('#floating-box');
                     
    if($('#body').length > 0){
      var bodyY = parseInt($('#body').offset().top) - 20;
      var originalX = $floatingbox.css('margin-left');
      $(window).scroll(function () {
        var scrollY = $(window).scrollTop();
        var isfixed = $floatingbox.css('position') == 'fixed';
        if($floatingbox.height() + 100 < $(window).height()){
        if($floatingbox.length > 0){
          if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
              position: 'fixed',
              left: '50%',
              top: 20,
              marginLeft: 240
            });
          } else if ( scrollY < bodyY && isfixed ) {
            $floatingbox.css({
              position: 'fixed',
              left: '50%',
              top: 118,
              marginLeft: 240
            });
          }
          }
        }
      });
    }
  });
</script>


参考：
http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/ http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航