跨浏览器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写这种东西是有点杀鸡焉用牛刀的味道,但谁叫本人对跨浏览器的脚本编程这么差呢。

新闻:百度英文为国增光


新化社2009年7月28日电:据国际知名调研机构Shasbi统计,自从今年2月全球最大中文搜索公司百度推出百度英文(baiduen.com)后,市场占有率极速上升,受到国际社会普遍欢迎,目前对全球99个国家130000名网民跟踪5个月的调查表明,百度已成为9成用户的默认搜索服务商。图为美国民众庆祝百度成功打败Yahoo!和Google。

有球必影

这是关于一个球第三者插足引发的故事。天黑了,天又亮了,虽然不及一炷香时辰,但根据咱们劳动者朴素的脑壳,大家喊出了资本家多付一天工钱的呼声;显然,这是奇特天文奇观引起大家对未来的幻觉,球再大、再多,也帮不了我们这个忙。

由于磁场太大的缘故,本人感冒,便秘,四肢无力,茶饭不思,心情不好,等不到车;洗脚,喝热水,没吃药;如此不顺,思来想去,只能怪球了。

凑数一篇,作为向后人证明本人当时在场的证据。

附:题目与真理部标准差之千里,内容存在鼓吹教唆嫌疑,望有关部门做好群众思想引导工作。

谷歌中国:来吧,你问他答

.       今天打开谷歌中国首页,发现其在首页推荐服务中了增加“问答”、“来吧”服务,这两款服务是通过集成天涯的天涯问答天涯来吧来提供的,并且链接颜色采用天涯传统的绿色而非谷歌的蓝色,这也暗示我们他们仍然是两家而非谁吞并了谁,事实上就是为天涯在谷歌中国增加了天涯的两个链接,区别在于:即使你已经转到了天涯的页面,其页面顶部部分仍然是谷歌的服务列表。这一变化也将谷歌中国的财经频道挤进了下拉列表。同时,谷歌中国首页右侧的登录链接也消失了,如果你要使用某款服务,只有打开服务的页面才可以登录(这个改变很愚蠢)。

.       我曾经用过天涯的问答服务,整体感觉一般,不过操作相对简单,即使你不是注册用户,只要提供一个邮箱亦可提问(邮箱是用来通知你的问题的回答情况)。大家可以试试,天涯问答 长的就是一副绿色脸的百度知道,而天涯来吧 显然也是一个绿颜色的百度贴吧,这个比喻天涯会很不舒服。所以这一招很显然,你百度天天抄袭我谷歌,还搞得人家说我不懂中文,生活不如意,今天我也学学你的行为,看你什么滋味。我的感觉是,在这次互相“学坏”的游戏中,天涯显然是占便宜了。

Digg链接缩短服务重定向自己命运

DIGGTag.       据国外报道称Digg对其Digg Url链接缩短服务进行了调整,具体是当你已登录Digg并安装了Digg的工具栏DiggBar,那么点击Digg链接缩短服务缩短的链接时,如往常一样,DiggBar上将显示与此链接的相关信息;如果你并非登陆用户,那么当你点击链接时将被重定向至Digg的与此链接内容有关的Digg页面。
.        我们知道,链接缩短服务(URL shortening service)是一个Web2.0的新兴小产品,主要是帮助人们将冗长的链接地址缩短成非常精简的链接地址,并提供此链接的重定向功能,当你点击缩短过后的链接时,它将直接将你带到原地址所指页面,这有助于人们分享链接,尤其是对于如Twitter、饭否这样的限制发文字数的微博客,用处更加明显。我平时用得比较多的是Bit.ly,目前这款产品已经成为Twitter默认的链接缩短服务,同时,它也是Digg链接缩短服务最强大的竞争对手。
.       这次Digg将其服务缩短的地址定向到自己的页面,也就是说,当我通过Digg链接缩短服务缩短一个冗长的地址兴高采烈地分享给朋友,并希望他们点击此链接第一时间获取信息时,他们看到的却是Digg的页面,这是一种极差的用户体验。Digg想借此举提高其页面的访问数量,也许一开始确实能帮助不少,然而,面对一款这样古怪的链接缩短服务,我没有理由不选Bit.ly。
Digg这种目光短浅的举动,重定向的也许不仅仅是一个页面,而是他们的命运。

高清无码

高清无码,欧美剧情,露天真人拍摄 (点击进入)

让我的博客变得社会化一些

.        这两天终于可以花时间对我的站点进行一些修修补补和优化,主要是对页面色调进行了重新搭配,将以前白色的主色调换成了现在的黑白两色,这样可以增加一些持重的感觉(个人观点),并且变更了页面的布局,在文章标题前面增加了一个类似Office Word logo的小图标;同时,为了跟得上社会,我也将一些Web2.0应用直接用图标的形式放在了页面右上方,这些图片是放在一个CSS Sprites里面的,如果有兴趣,你可以将图片保存到本地,会发现它们其实是一张图片,而不是零散各自独立的小图标,这样做的好处是可以减少Http请求次数,提高访问速度;图标有些大但容易发现(这让我想起百度老年),最后,对CSS文件也进行了一些优化,将原来的7个CSS文件合并成1个管理,减少不少HTTP请求。

.       这次在页面右上角增加了一个邮件链接、一个Twitter地址和一个饭否地址,同时将以前的Feedburner订阅地址也集中到一起了,并进行了一些排版(要感谢blues的意见,否则会比现在难看),其实我制作的CSS Sprites里面还包含的DeliciousDigg的图标,等以后有空再将它们集成进我的博客文章里面。

5招轻松提高网站访问速度

.        一些著名博客站点(如月光博客)由于拥有独立服务器托管和良好带宽,页面访问迅速极快,而小博客往往是花小钱租借空间,访问并不理想。曾经我也发誓等哪天有钱了也给自己的空间升升级,可想到雅虎兴起、杨致远成名后还在用电话线上网的故事,本人决定将页面优化进行到底。这里分享几点页面优化的心得。

.        一次Web访问概括起来讲就是“前台-后台-前台”,用户通过浏览器向服务器发送HTTP请求,服务器接收到请求后调用后台程序运行计算并向浏览器回送浏览器可识别可解释内容(如HTML、脚本文件、CSS、图像、Flash动画、视频和音频等),最后又重新通过浏览器将这一切呈现给我们,因此,要改变访问速度,就可以在这个过程中“动手脚”。

1.    网页尽量少包含图片(这招实用易操作);这有两个方面,一个是用于装饰网站的基本图片,另一个是文章中用户做插图的图片。曾经用本人的网站做过测试:将网站首页保存到本地,当文章包含几张普通插图时有680K,而去掉图片后只剩下120多K。图片是消耗网站加载速度的一大原因。

2.   减少HTTP请求次数;刚刚我们粗略分析了一次Web访问的全过程(“前台-后台-前台”),经研究,一次HTTP请求中只用了10%~20%的时间来接收和渲染页面,而有80% ~ 90%的时间用在发出请求上,因此减少HTTP请求是节约时间的有效手段。通常可以通过合并文件来减少,假设一个网站包含1个HTML文件、2个Javascript文件、2个CSS文件以及零碎的11个小图片文件,1+2+2+11=16,也就是说需要发送16次HTTP请求,而如果我们将2个Javascript文件合并在一起,CSS文件及图片文件也用相同方法合并,这时请求数减少到 1+1+1+1=4(次)。如果加载的文件更多,这样改进的效果将更加明显。

3.   压缩文件;将需要加载的文件如CSS、脚本经过一些专门的压缩工具压缩成较小的包,这有助于提高网页下载速度。当网页中包含较大的脚本文件时,用压缩工具可以看到惊人的压缩比。

4.   合理安排文件加载顺序;由于文件的加载顺序一般是按照其在文本中出现的先后顺序来进行的,我们将CSS文件包含在<HEAD>标签中,而Javascript文件往往放在最后加载(一般在</body>之前即可)。

5.   尽量少用<TABLE>标签构建页面布局;用<TABLE>元素构建网页布局是传统的构建方法,但不得不说这是一个落后且需要淘汰的方法,我们提倡使用<DIV>标签来规划页面布局,因为<TABLE>构建的网页需要整个TABLE包含的内容都加载后才会呈现,对于网速慢的网络浏览器容易出现白屏,给用户带来极差的体验,而用<DIV>构建的网页采用局部加载,即使网络不佳,页面也是逐步呈现而不是白屏等待。

.        以上五点是本人的一些实际操作经验,虽然网站优化还有很多学问,但做了以上5点,我相信网站一定会出现令人高兴地变化。