在浏览器中网页淡入淡出的实现方法技术

本发明专利技术涉及一种在浏览器中网页淡入淡出的实现方法，是通过以下步骤实现的：对需要实现该效果的页面元素编码并设置唯一标示符，将需要实现的区域统一编码入一个ＤＯＭ层中；判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；通过ＪａｖａＳｃｒｉｐｔ和事件处理器对鼠标滚轮做出反应：设置滚轮的初试值变量和事件变量；对滑轮滚动的事件设定一个参数代表滑轮滚动的距离；根据滑轮滑动距离计算出淡入淡出的程度；根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色或透明度的值；通过对滑轮滚动事件的传值和上层页面元素的背景色，得到该控件需要变成的颜色；让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。

【技术实现步骤摘要】

本专利技术涉及一种浏览器中网页，尤其涉及。
技术介绍
现有技术中网页的淡入淡出主要利用filter滤镜及改变页面元素的透明度实现瞬间的变换效果，无法解决浏览器兼容问题和该效果的平滑显示。 由于无法解决上述技术问题，未能实现浏览器中网页的淡进淡出效果。 网页的淡入淡出，就是通过客户控制或自定义方法实现页面某一区域的隐现。 所谓淡进淡出的效果是指在浏览器中网页主要表现在通过对当前激活网页的透明度的平滑式调节，达到当前激活网页相较其他非激活网页，逐步地由100 %不透明到100 %透明式隐藏的亮度变换。 上述情况造成的原因是由于在现有技术的浏览器中网页中，未通过用户操作计算 变换时间，达到更高的用户体验.
技术实现思路
本专利技术需要解决的技术问题是提供了一种， 旨在解决上述的问题。 为了解决上述技术问题，本专利技术是通过以下步骤实现的 对需要实现该效果的页面元素(HTML DOM)编码并设置唯一标示符，将需要实现的 区域统一编码入一个DOM层中； 判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；所述的浏览器是 IE或者是Safari或者是Firefox或者是Opera或者是Chrome ;根据浏览器响应的不同，获 得响应的浏览器类型后，对滑轮滚动的事件进行不同的编码； 通过JavaScript和事件处理器(Event handler)对鼠标滚轮做出反应设置滚轮 的初试值变量(如delta)和事件变量(如event); 对滑轮滚动的事件设定一个参数代表滑轮滚动的距离(如上delta值，也可以叫 滑轮的角度)；根据滑轮滑动距离计算出淡入淡出的程度； 根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色(或透明度的 值)； 通过对滑轮滚动事件的传值和上层页面元素的背景色，得到该控件需要变成的颜 色； 让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。 与现有技术相比，本专利技术的有益效果是，通过得到滚动事件的得到传值，可以达到任意程度的隐现效果。附图说明 图l是本专利技术的流程图。 具体实施例方式下面结合附图与具体实施方式对本专利技术作进一步详细描述 由图1可见本专利技术是通过以下步骤实现的 对需要实现淡入淡出效果的页面元素(HTML DOM)编码并设置唯一标示符，将需要 实现此效果的页面区域统一编码入一个DOM层中； 判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；所述的浏览器是 IE或者是Safari或者是Firefox或者是Opera或者是Chrome ;根据浏览器响应的不同，获 得响应的浏览器类型后，对滑轮滚动的事件进行不同的编码； 通过JavaScript和事件处理器(Event handler)对鼠标滚轮做出反应设置滚轮 的初试值变量(如delta)和事件变量(如event)，示例代码如下 if (window. addEventListe證)〃 口向应滑轮的事件 /氺mozi 1 la/chrome f文lj览氺/ window. addEventListener('DO匪ouseScroll'， wheel, false); /氺IE/Opera/safari狡U览器氺/ window, onmousewheel = document, onmousewheel = wheel ; function wheel (event) {〃对滚轮的处理函数 var delta = 0 ; if ( ! event)/*IE浏览器.*/ event = window, event ; if (event. wheelDelta) (/氺IE或Opera.狡U览器氺/ delta = event. wheelDelta/120 ; if (window, opera)/氺氺0pera 9氺/ delta = -delta ; }else if (event, detail) { delta = —event, detail/3 ;/氺Mozilla狡U览器氺/ } /*如果delta变量不为0，即对滑轮事件进行处理，delta大于0，为上滑事 件， 小于0为下滑事件 */ if (delta) handle (delta) ;/*调用函数进行变化处理*/ } 对滑轮滚动的事件设定一个参数代表滑轮滚动的距离(如上delta值，也可以叫滑轮的角度)； 根据滑轮滑动距离计算出淡入淡出的程度； 根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色(或透明度的4值).通过对滑轮滚动事件的传值，和上层页面元素的背景色，得到该控件需要变成的颜 色； 让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。权利要求一种，是通过以下步骤实现的对需要实现该效果的页面元素编码并设置唯一标示符，将需要实现的区域统一编码入一个DOM层中；判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；所述的浏览器是IE或者是Safari或者是Firefox或者是Opera或者是Chrome；根据浏览器响应的不同，获得响应的浏览器类型后，对滑轮滚动的事件进行不同的编码；通过JavaScript和事件处理器对鼠标滚轮做出反应设置滚轮的初试值变量和事件变量；对滑轮滚动的事件设定一个参数代表滑轮滚动的距离；根据滑轮滑动距离计算出淡入淡出的程度；根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色或透明度的值；通过对滑轮滚动事件的传值和上层页面元素的背景色，得到该控件需要变成的颜色；让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。全文摘要本专利技术涉及一种，是通过以下步骤实现的对需要实现该效果的页面元素编码并设置唯一标示符，将需要实现的区域统一编码入一个DOM层中；判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；通过JavaScript和事件处理器对鼠标滚轮做出反应设置滚轮的初试值变量和事件变量；对滑轮滚动的事件设定一个参数代表滑轮滚动的距离；根据滑轮滑动距离计算出淡入淡出的程度；根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色或透明度的值；通过对滑轮滚动事件的传值和上层页面元素的背景色，得到该控件需要变成的颜色；让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。文档编号G06F17/30GK101794284SQ200910045730公开日2010年8月4日 申请日期2009年2月3日 优先权日2009年2月3日专利技术者丁晓峰, 任义兵, 司强, 吴会然, 张大钟, 张维澜, 王宁, 芮斌, 袁舜彦, 高祺 申请人:上海东方宽频传播有限公司本文档来自技高网...

【技术保护点】
一种在浏览器中网页淡入淡出的实现方法，是通过以下步骤实现的：对需要实现该效果的页面元素编码并设置唯一标示符，将需要实现的区域统一编码入一个ＤＯＭ层中；判断终端用户的浏览器类型，并响应对应的用户鼠标滑轮事件；所述的浏览器是ＩＥ或者是Ｓａｆａｒｉ或者是Ｆｉｒｅｆｏｘ或者是Ｏｐｅｒａ或者是Ｃｈｒｏｍｅ；根据浏览器响应的不同，获得响应的浏览器类型后，对滑轮滚动的事件进行不同的编码；通过ＪａｖａＳｃｒｉｐｔ和事件处理器对鼠标滚轮做出反应：设置滚轮的初试值变量和事件变量；对滑轮滚动的事件设定一个参数代表滑轮滚动的距离；根据滑轮滑动距离计算出淡入淡出的程度；根据需要达到的淡入淡出的程度计算出本控件需要变成的颜色或透明度的值；通过对滑轮滚动事件的传值和上层页面元素的背景色，得到该控件需要变成的颜色；让该页面元素的背景颜色变成需要达到的颜色，或改变该元素的透明度。

【技术特征摘要】

【专利技术属性】
技术研发人员：张大钟，芮斌，王宁，张维澜，任义兵，丁晓峰，高祺，吴会然，袁舜彦，司强，
申请(专利权)人：上海东方宽频传播有限公司，
类型：发明
国别省市：31[中国|上海]