跨浏览器Ext版网页漂浮广告JavaScript函数
今天浙大门户系统提出一个需求，用户登录后希望网页上可以漂浮一个小图片，提醒同学可以做在线咨询，我一听，这不就是本人最讨厌的网页广告吗，可没办法，人家给钱，你就是奴才。
在网上一搜，这类脚本铺天盖地，基本是一样的，纯JS写成，拷过来一用，静态页面时IE和Firefox都正常，改成JSP后在IE下还好，Firefox下就不行了，该飘的东西一动不动，改了半天没改出来，想想咱们门户每次加载都带上了Ext库，咱们也别浪费了，我就用Ext写了个跨浏览器的漂浮JavaScript函数，在JSP下通过IE、Firefox及Safari测试，Chrome应该也没问题。函数源码如下：
function floatInfo(id, distance, per){
var flagH = 0;
var flagW = 0;
var distance4L = distance;
var avaiH = document.body.clientHeight - id.getHeight();
var avaiW = document.body.clientWidth - id.getWidth();
var task = {run: function(){
id.setTop(id.getTop() + distance);
flagH += distance;
if(flagH >= avaiH || flagH <= (-avaiH)) {
distance = (-distance);
flagH = 0;
}
id.setLeft(id.getLeft() + distance4L);
flagW += distance4L;
if(flagW >= avaiW || flagW <= (-avaiW)) {
distance4L = (-distance4L);
flagW = 0;
}
},
interval: per
}
Ext.TaskMgr.start(task);
}
传入参数id代表网页上要漂浮元素的id；distance是数字，代表一次移动多少像素；per也是数字，代表多长时间移动一次，其中1000代表1秒，数字越小移动越快。使用方式如下：
<script type="text/javascript">
Ext.onReady(function(){
var id = Ext.get('float_dis');
floatInfo(id,10,300);
})
</script>
虽然用Ext写这种东西是有点杀鸡焉用牛刀的味道，但谁叫本人对跨浏览器的脚本编程这么差呢。