[发明专利]在浏览器中网页淡入淡出的实现方法

说明书

技术领域

本发明涉及一种浏览器中网页，尤其涉及在浏览器中网页淡入淡出的实现方法。

背景技术

现有技术中网页的淡入淡出主要利用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浏览器*/

     }