[發明專利]在瀏覽器中網頁淡入淡出的實現方法

無效

• 申請號: 200910045730.2
• 申請日: 2009-02-03
• 公開（公告）號: CN101794284A
• 公開（公告）日: 2010-08-04
• 發明（設計）人: 張大鐘;芮斌;王寧;張維瀾;任義兵;丁曉峰;高祺;吳會然;袁舜彥;司強
• 申請（專利權）人: 上海東方寬頻傳播有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 上海智信專利代理有限公司 31002
• 代理人: 胡美強

技術領域

本發明涉及一種瀏覽器中網頁，尤其涉及在瀏覽器中網頁淡入淡出的實現方法。

背景技術

現有技術中網頁的淡入淡出主要利用filter濾鏡及改變頁面元素的透明度實現瞬間的變換效果，無法解決瀏覽器兼容問題和該效果的平滑顯示。

由于無法解決上述技術問題，未能實現瀏覽器中網頁的淡進淡出效果。

網頁的淡入淡出，就是通過客戶控制或自定義方法實現頁面某一區域的隱現。

所謂淡進淡出的效果是指在瀏覽器中網頁主要表現在通過對當前激活網頁的透明度的平滑式調節，達到當前激活網頁相較其他非激活網頁，逐步地由100％不透明到100％透明式隱藏的亮度變換。

上述情況造成的原因是由于在現有技術的瀏覽器中網頁中，未通過用戶操作計算變換時間，達到更高的用戶體驗.

發明內容

本發明需要解決的技術問題是提供了一種在瀏覽器中網頁淡入淡出的實現方法，旨在解決上述的問題。

為了解決上述技術問題，本發明是通過以下步驟實現的：

對需要實現該效果的頁面元素(HTML?DOM)編碼并設置唯一標示符，將需要實現的區域統一編碼入一個DOM層中；

判斷終端用戶的瀏覽器類型，并響應對應的用戶鼠標滑輪事件；所述的瀏覽器是IE或者是Safari或者是Firefox或者是Opera或者是Chrome；根據瀏覽器響應的不同，獲得響應的瀏覽器類型后，對滑輪滾動的事件進行不同的編碼；

通過JavaScript和事件處理器(Event?handler)對鼠標滾輪做出反應：設置滾輪的初試值變量(如delta)和事件變量(如event)；

對滑輪滾動的事件設定一個參數代表滑輪滾動的距離(如上delta值，也可以叫滑輪的角度)；根據滑輪滑動距離計算出淡入淡出的程度；

根據需要達到的淡入淡出的程度計算出本控件需要變成的顏色(或透明度的值)；

通過對滑輪滾動事件的傳值和上層頁面元素的背景色，得到該控件需要變成的顏色；

讓該頁面元素的背景顏色變成需要達到的顏色，或改變該元素的透明度。

與現有技術相比，本發明的有益效果是，通過得到滾動事件的得到傳值，可以達到任意程度的隱現效果。

附圖說明

圖1是本發明的流程圖。

具體實施方式

下面結合附圖與具體實施方式對本發明作進一步詳細描述：

由圖1可見：本發明是通過以下步驟實現的：

對需要實現淡入淡出效果的頁面元素(HTML?DOM)編碼并設置唯一標示符，將需要實現此效果的頁面區域統一編碼入一個DOM層中；

判斷終端用戶的瀏覽器類型，并響應對應的用戶鼠標滑輪事件；所述的瀏覽器是IE或者是Safari或者是Firefox或者是Opera或者是Chrome；根據瀏覽器響應的不同，獲得響應的瀏覽器類型后，對滑輪滾動的事件進行不同的編碼；

通過JavaScript和事件處理器(Event?handler)對鼠標滾輪做出反應：設置滾輪的初試值變量(如delta)和事件變量(如event)，示例代碼如下：

if(window.addEventListener)//響應滑輪的事件

/*mozilla/chrome瀏覽器*/

?????window.addEventListener(’DOMMouseScroll’，wheel，false)；

/*IE/Opera/safari瀏覽器*/

?????window.onmousewheel＝document.onmousewheel＝wheel；

function?wheel(event){//對滾輪的處理函數

?????var?delta＝0；

?????if(！event)/*IE瀏覽器.*/

????????????event＝window.event；

?????if(event.wheelDelta){/*IE或Opera.瀏覽器*/

????????????delta＝event.wheelDelta/120；

????????????if(window.opera)/**Opera?9*/

??????????????????delta＝-delta；

?????}else?if(event.detail){

????????????delta＝-event.detail/3；/*Mozilla瀏覽器*/

?????}