一个关于页面右侧浮层相对定位的例子

最新推荐文章于 2021-09-28 10:33:16 发布

SundayHugo

最新推荐文章于 2021-09-28 10:33:16 发布

阅读量1.1k

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weeknuaa/article/details/9004547

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="gbk"/>
<style type="text/css">
@import url(http://style.china.alibaba.com/app/trade/css/just/lang/text.css);
@import url(http://style.china.alibaba.com/fdevlib/css/fdev-v4/core/fdev-float.css);

.ct{
   margin-left:200px;
}

.test1{
  background: blue;
  width:600px;
  height:400px;
}

.test2{
  background: red;
   width:600px;
   height:1000px;
}

.test3{
  background: yellow;
   width:600px;
   height:300px;
}

.float{
   width:30px;
   height:100px;
   overflow:hidden;
   background: lime;
   position: fixed;
}
.player{
	width: 600px;
	height: 600px;
	}
#ui-flash-object4{
	
}
</style>

<script type="text/javascript">
(function(){
	ImportJavscript = {
		url:function(url){
			document.write("<script type=\"text/javascript\" src=\""+url+"\"></scr"+"ipt>");
		}
	};
})();
ImportJavscript.url('http://style.china.alibaba.com/fdevlib/js/fdev-v4/core/fdev-min.js');
ImportJavscript.url('http://style.china.alibaba.com/app/trade/js/just/core/just.js');

</script>

<script type="text/javascript">
define(['jquery'], function($){
	
	
	/**
	 *对齐实现
	 *@param {jQueryElement|HTMLObject} float 浮动的元素
	 *@param {jQueryElement|HTMLObject} dest 对齐的目标元素
	 */
    function postion(float,dest){
    	var  $doc = $(document),
               $win = $(window),
               $float = $(float),
    	       $dest = $(dest);
    	
    	  var dest_offset = $dest.offset(),
    	       dest_height = $dest.outerHeight(),
    	       float_height = $float.outerHeight();
    	
    	   var left =  dest_offset.left + $dest.outerWidth();
    	   var top = $doc.scrollTop() + Math.floor(($win.outerHeight()-float_height)/2);
    	   
    	   if(top<dest_offset.top){
    		   top= dest_offset.top;
    	   }else if(top> (dest_offset.top+dest_height-float_height)){
    		   top= dest_offset.top+dest_height-float_height;
    	   }
    	   
    	   $float.offset({left:left,top:top});
    }
    
    //实现逻辑 绑定
    $float = $('.float'),
    $dest = $('.test2');
    
    $(window).on('scroll.floatpos',function(){
    	postion($float,$dest);
    }).on('resize.floatpos',function(){
    	postion($float,$dest);
    });	
    postion($float,$dest);
    
}).register();
</script>
    </head>
    <body>
            <div class="ct">
                 <div class="test1"></div>
                 <div class="test2" value='{"hello","world"}'></div>
                 <div class="test3"></div>
            </div>
			
            <div class="float"></div>
    </body>
</html>