zoukankan      html  css  js  c++  java
  • EonerCMS——做一个仿桌面系统的CMS(七)

    智能修改窗口的位置

      在测试的时候,我发现调整浏览器尺寸后,原先靠近浏览器边缘的窗口就直接被隐藏掉了,如下图:

      出现这问题的原因也很简单,因为窗口的top、left的值是写死的,当浏览器的宽高小于窗口top、left时,必然会被隐藏掉。解决办法就是在调整浏览器尺寸的同时,把窗口的top、left也一起修改,但是具体要修改成多少呢?

      经过自己的考虑和他人的指点,最终的解决办法就是按比例修改,也就是按当时窗口离左/右、上/下的距离与整个窗口大小的比例进行缩放,说的可能有点迷糊,不如看下修改公式吧:

      top = 浏览器缩放前窗口上边距 / ( 浏览器缩放前高度 - 浏览器缩放前窗口高度 ) * ( 浏览器缩放后高度 - 浏览器缩放后窗口高度 );

      left = 浏览器缩放前窗口左边距 / ( 浏览器缩放前宽度 - 浏览器缩放前窗口宽度 ) * ( 浏览器缩放后宽度 - 浏览器缩放后窗口宽度 );

      公式里我对浏览器的宽高都减去了窗口的宽高,原因就是不管浏览器怎么缩放,窗口的宽高是始终不会变化的,如果不减去窗口的宽高,是无法按比例缩放的。

      最终效果如下图:

      demo大家应该看到了,试试缩放下浏览器看下效果吧。

    我是演示,看完文章后再看我

      demo源码,js

    $().ready(function(){
    	var dfw = $(window).width() - $("#div1").width();
    	var dfh = $(window).height() - $("#div1").height();
    	var dl = $("#div1").offset().left;
    	var dt = $("#div1").offset().top;
    	$(window).bind("resize",function(){
    		var ctw = $(window).width() - $("#div1").width();
    		var cth = $(window).height() - $("#div1").height();
    		$("#div1").css({"left":(dl/dfw*ctw)+"px","top":(dt/dfh*cth)+"px"});
    	});
    });
    

      html

    <div id="div1" style="300px;height:30px;line-height:30px;text-align:center;padding:5px;background:red;position:absolute;top:100px;left:100px">我是演示,看完文章后再看我</div>
    


     

  • 相关阅读:
    浅谈PHP7新特性
    TP5与TP3.X对比
    深入源码理解Spark RDD的数据分区原理
    OpenGL的一些基础概念
    关于Spark RDD 的认识
    Ubuntu安装Cloudera Manager以及CDH5.15.2
    小甲鱼零基础汇编语言学习笔记第六章之包含多个段的程序
    小甲鱼零基础汇编语言学习笔记第五章之[BX]和loop指令
    机器学习入门之决策树算法
    机器学习的基本概念
  • 原文地址:https://www.cnblogs.com/hooray/p/2199227.html
Copyright © 2011-2022 走看看