EonerCMS 做乙個仿桌面系統的CMS(七)

2022-02-09 09:19:19 字數 909 閱讀 5522

智慧型修改視窗的位置

在測試的時候,我發現調整瀏覽器尺寸後,原先靠近瀏覽器邊緣的視窗就直接被隱藏掉了,如下圖:

出現這問題的原因也很簡單,因為視窗的top、left的值是寫死的,當瀏覽器的寬高小於視窗top、left時,必然會被隱藏掉。解決辦法就是在調整瀏覽器尺寸的同時,把視窗的top、left也一起修改,但是具體要修改成多少呢?

經過自己的考慮和他人的指點,最終的解決辦法就是按比例修改,也就是按當時視窗離左/右、上/下的距離與整個視窗大小的比例進行縮放,說的可能有點迷糊,不如看下修改公式吧:

top = 瀏覽器縮放前視窗上邊距 / ( 瀏覽器縮放前高度 - 瀏覽器縮放前視窗高度 ) * ( 瀏覽器縮放後高度 - 瀏覽器縮放後視窗高度 );

left = 瀏覽器縮放前視窗左邊距 / ( 瀏覽器縮放前寬度 - 瀏覽器縮放前視窗寬度 ) * ( 瀏覽器縮放後寬度 - 瀏覽器縮放後視窗寬度 );

公式裡我對瀏覽器的寬高都減去了視窗的寬高,原因就是不管瀏覽器怎麼縮放,視窗的寬高是始終不會變化的,如果不減去視窗的寬高,是無法按比例縮放的。

最終效果如下圖:

demo大家應該看到了,試試縮放下瀏覽器看下效果吧。

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

demo原始碼,js

$().ready(function());

});});

html

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

EonerCMS 做乙個仿桌面系統的CMS(四)

按住我拖動 一晃又過去乙個多星期了,途 了個差,進度上略有耽誤,不過還好,上次有個話題沒說完,這次繼續,就是視窗拖動以及改變視窗尺寸。視窗拖動 改變視窗尺寸 html 如下 按住我拖動 ready function titledemo bind mousedown function e docume...

EonerCMS 做乙個仿桌面系統的CMS(二)

上一周我說到,我要開始做乙個仿桌面系統的cms。現在,一周過去了,來做個小小的總結吧,順便把上一周片尾留的小問題解答下。桌面 關於介面,思前想後,還是模仿115的了,說是模仿,其實幾乎是照搬。因為我看了下html和css,沒有什麼太大的技術含量,製作起來也不會遇到什麼困難,乾脆捨棄這一步,進入後面的...

EonerCMS 做乙個仿桌面系統的CMS(五)

這次主要講一下js模板和滑鼠右鍵功能,東西比較簡單,我就沒有做demo,簡單說下原理吧。js模板 為什麼要使用js模板?因為在這個系統裡,我經常要開啟乙個或多個視窗,但實際上這些視窗的html 都是一樣的,只是其中的引數稍微有點變化。既然如此,何不寫成模板,把引數定義成指定格式的標籤,然後用正則批量...