x;width: 100px;height: 100px"，从而得到该节点的坐标信 息（10, 10, 100, 100)，由于a标签是div标签的子节点，所以就能得到a标签坐标信息 (10, 10, 100, 100)。
[0040] 步骤S11，每隔预设间隔时间T1 (如50ms)，计算出当前焦点框的当前坐标信息info(xn，yn，wn，hn)。其中，当前焦点框是以当前焦点为中心的一个方形区域(如矩形区 域)，xn代表当前焦点框距离浏览器页面最左端的距离，yn代表当前焦点框距离浏览器页面 最上端的距离，wn代表当前焦点框的宽度，hn代表当前焦点框的高度。
[0041] 具体而言，在本实施例中，当根据初始坐标信息绘制完初始焦点对应的初始焦点 框后，并不直接绘制终点焦点对应的终点焦点框，而是每隔固定时间发送一个在定时器中 绘制焦点框的消息(标识为PAINT_IN_TIMER，以下称为"动态焦点框绘制消息"）给预先设 定的定时器。定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息 info(xn，yn，wn，hn)〇
[0042] 在本实施例中，当前焦点框的当前坐标信息根据初始焦点框的初始坐标信息，以 预先设定的步进距离移动，直至当前坐标信息与终点坐标信息一致。举例而言，假设定时器 的固定时间TO为500ms (即在固定时间500ms内多次动态绘制焦点框)，每次定时器的循 环时间是50ms (即预设间隔时间Tl=50ms)，如果焦点向正右方向移动，则xn=xl+xl/(T0/ Tl)=xl+xl/(500/50)，yn=yl, wn=wl, hn=hl。同理，如果焦点向正下方移动，则 yn=yl+yl/ (T0/T1)=yl+yl/(500/50), xn=xl, wn=wl, hn=hl〇
[0043] 步骤S12,根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上。
[0044] 步骤S13,判断当前坐标信息与终点坐标信息是否一致。如果当前坐标信息与终点 坐标信息不一致，则返回步骤S11，绘制下一个焦点框。如果当前坐标信息与终点坐标信息 一致(即当前焦点框与终点焦点框一致)，则执行步骤S14。
[0045] 步骤S14,发送结束绘制的消息(标识为PAINT_D0NE)，然后退出绘制当前焦点框。 具体而言，发送结束绘制的消息给预先设定的定时器，定时器在下一次收到结束绘制的消 息之后退出绘制当前焦点框。之所以要在定时器下一次收到PAINT_D0NE消息(结束绘制 消息）才退出，而不是本次直接退出，是因为本次接收到的消息仍是PAINT_IN_HMER (动态 焦点框绘制消息)，在绘制完最后一次当前焦点框后，才发出PAINT_D0NE消息，而该PAINT_ DONE消息是在定时器下一次才能接收到。
[0046] 也就是说，在本实施例中，每隔固定时间，在初始焦点和终点焦点之间绘制一次当 前焦点框，直到当前坐标信息与终点坐标信息一致，以产生浏览器焦点的动态移动效果。举 例而言，参阅图3所示，第（1)图至第（5)图展示了浏览器焦点从左至右的动态移动过程，而 传统的焦点移动技术只会产生第（1)图和第（5)图的显示效果。
[0047] 本发明的关键点在于通过Timer消息机制多次绘图焦点框，Timer消息里面直接 计算当前焦点框的坐标信息，焦点框多次直接绘制没有用到Surface，而且页面也更加简 洁，更加快捷方便。
[0048] Timer消息刷新机制为多次绘制焦点框打下了基础，在这个机制上可以实现焦点 的动态移动，通过在Timer中循环调用Ontimer函数，可以多次接收动态焦点框绘制消息， 实现多次绘制焦点框。
[0049] 在本实施例中，通过真焦点的绘制方法实现浏览器焦点的动态移动效果。
[0050] 1?真焦点实现方法如下：
[0056]其中，left代表焦点框距离浏览器页面最左端的距离，top代表焦点框距离浏览 器页面最上端的距离，width代表焦点框的宽度，height代表焦点框的高度。
[0057] 在其它实施例中，也可以通过假焦点设置2D图片的方法实现浏览器焦点的动态 移动效果。
[0058] 2?假焦点实现方法如下：
[0059]
[0060] 由此可知，假焦点的动态移动要用到大量Java Script (JS)写法，将增加页面的 书写难度。而通过真焦点的方式多次直接绘制焦点框没有用到Surface内存，更加快捷方 便，且节约内存，因为假焦点中的2D图片特效，每次都要创建一块内存，用于对图片数据的 存储和显示。
[0061] 综上所述，以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。 凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的 保护范围之内。
【主权项】
1. 一种浏览器焦点动态移动方法，其特征在于，该方法包括如下步骤： 获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息； 当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前 坐标信息； 根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上；及 如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框。2. 如权利要求1所述的浏览器焦点动态移动方法，其特征在于，所述初始焦点框是以 初始焦点为中心的一个方形区域，所述终点焦点框是以终点焦点为中心的一个方形区域， 所述当前焦点框是以当前焦点为中心的一个方形区域。3. 如权利要求1所述的浏览器焦点动态移动方法，其特征在于，该方法还包括步骤： 当绘制完初始焦点框后，每隔固定时间发送一个动态焦点框绘制消息给预先设定的定 时器，定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息。4. 如权利要求3所述的浏览器焦点动态移动方法，其特征在于，所述当前焦点框的当 前坐标信息根据初始焦点框的初始坐标信息，以预先设定的步进距离移动，直至当前坐标 信息与终点坐标信息一致。5. 如权利要求3所述的浏览器焦点动态移动方法，其特征在于，该方法还包括步骤： 如果当前坐标信息与终点坐标信息一致，则发送结束绘制的消息给预先设定的定时 器，定时器在下一次收到结束绘制的消息之后退出绘制当前焦点框。6. -种浏览器焦点动态移动系统，其特征在于，该系统包括： 获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息的模块； 当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前 坐标信息的模块； 根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上的模块；及 如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框的模块。7. 如权利要求6所述的浏览器焦点动态移动系统，其特征在于，所述初始焦点框是以 初始焦点为中心的一个方形区域，所述终点焦点框是以终点焦点为中心的一个方形区域， 所述当前焦点框是以当前焦点为中心的一个方形区域。8. 如权利要求6所述的浏览器焦点动态移动系统，其特征在于，该系统还包括： 当绘制完初始焦点框后，每隔固定时间发送一个动态焦点框绘制消息给预先设定的定 时器的模块，定时器接收到该动态焦点框绘制消息后，计算出当前焦点框的当前坐标信息。9. 如权利要求8所述的浏览器焦点动态移动系统，其特征在于，所述当前焦点框的当 前坐标信息根据初始焦点框的初始坐标信息，以预先设定的步进距离移动，直至当前坐标 信息与终点坐标信息一致。10. 如权利要求8所述的浏览器焦点动态移动系统，其特征在于，该系统还包括： 如果当前坐标信息与终点坐标信息一致，则发送结束绘制的消息给预先设定的定时器 的模块，定时器在下一次收到结束绘制的消息之后退出绘制当前焦点框。
【专利摘要】一种浏览器焦点动态移动方法及系统，该方法包括如下步骤：获取浏览器的初始焦点框的初始坐标信息和终点焦点框的终点坐标信息；当根据初始坐标信息绘制完初始焦点框后，每隔固定时间，计算出当前焦点框的当前坐标信息；根据当前坐标信息绘制当前焦点框，并将当前焦点框显示在浏览器上；如果当前坐标信息与终点坐标信息一致，则退出绘制当前焦点框。利用本发明可通过Timer消息刷新机制，在初始焦点和终点焦点之间绘制一次或多次焦点框，形成动态的焦点移动效果。
【IPC分类】G06F17/30, G06F9/44
【公开号】CN105022612
【申请号】CN201410156427
【发明人】徐佳宏, 陈栋, 朱吕亮
【申请人】深圳市茁壮网络股份有限公司
【公开日】2015年11月4日
【申请日】2014年4月18日