网页要动起来才好看!
最初看到动起来的网页,我非常惊奇,至今仍觉得这是Web2.0最直接易懂的特征。
当然,凡事都要有度,如果动态效果过多,往往会干扰网页正文,有一阵,大家都烦那些会飘的,永远占据屏幕,赶也赶不走的动态广告。这样的结果就叫“喧宾夺主”。还有另外一种动态效果容易引起不良的用户体验,这就是一不小心,容易产生屏幕闪烁,炫目晃眼。
写博客时,很想提醒访客下次再来,特别是有了新博文放上后希望立刻有客人来访问,此所谓 “有朋自远方来,不亦乐乎?”的心情。每当此时,心中就特别想,即不打扰客人的来访,却也在无声无息之间,提醒访客做个RSS订阅 ,或者摆个广告什么的:) 。为了这个目的,希望让浮动栏跟随鼠标滚动,同时又能够做到不干扰正文的阅读,而且屏幕显示柔和不闪烁。

首先,让浮动栏窄窄地躲到最边上,这样可以不干扰正文的阅读了。目前很多网站都是这么做的。
但,屏幕的闪烁问题如何避免呢?好像大多数的网站都没有注意到这个问题。我想了一个方法,在今年六,七月间,采用JQuery,做了一个动态效果,使用至今几个月,感觉挺好。这里和大家分享一下。

先看一下结果: 请您往最右边看,再滚动滚动页面,然后等上大约5秒钟,是不是发现了一个彩色直条(浮动订阅栏)悄悄的跟随而来?是否,屏幕不闪烁,不晃眼吧?

现在让我们来看一下,屏幕不闪烁是如何做到的。

先说一下目前一般的跟随鼠标滚动的处理方法吧,感觉上,做这种浮动条,浮动层,往往采用$(window).scroll(function()….) 这个窗体的滚动事件来实现,每次页面滚动的时候,都将触发这个事件。在这个事件的处理过程中,重新计算要浮动的层的位置,这样就达到了定位的目的。不过,也正是因为这个事件属于一滚动就触发的“及时快速反应”,所以导致屏幕容易闪烁。而且,暗地里觉得,$(window).scroll(function()….) 好辛苦,终日奔波不得休息。

那么,有别的办法达到定位的目的吗?很高兴,有的,这就是定时检查位置、然后移动完成定位。这个办法不仅避免了屏幕的闪烁,而且因为“以逸待劳”所以动画的效果也好一些。 :)

这里给出代码例子:
先看javascript部分的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$().ready(function() {
	$("waybox ").everyTime("5s",function(){ //这里的everyTime 定义了一个定时器,每隔5秒执行一次。
 
		var originTop = $("waybox ").offset().top// 浮动栏相对父层的偏移位置
		var window_scroll_top = $(window).scrollTop();  // 屏幕滚动的位置
		var adjustTop = 16; //一个微调,用以吸收padding等等的影响
 
		// 进行必要的调整,比如已经越过上边界等等情况,然后算出需要的新位置
		var newTop = (window_scroll_top > originTop) ?  window_scroll_top - originTop + adjustTop: 0; 
 
		// 利用新位置进行移动的动画
		$("waybox ").animate({"top": newTop}, "slow");
	});
});

然后看相关的css部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*父层*/
#waybar {
	float: right;
	width: 38px;
	height: 300px;
	margin: 10px auto 5px;
	padding: 0px 0px 0px 0px;
}
 
/*浮动栏*/
#waybox {
	position:relative;
	width:95%;
	margin: 0px auto;
	overflow: hidden;
}

在这段代码中,我采用了JQuery的一个定时器插件:jQuery.timers,调用了其中的everyTime()的函数,来实现每隔一段时间的检查和移动。这个函数的使用,成功实现了屏幕不闪烁的效果。
在function中间的代码,和使用$(window).scroll(function()….) 窗体的滚动事件的实现方法是一样的。

做这个效果的时候,发现了JQuery.timers这个插件非常好,把javascript的定时功能包装到了三个函数中,完全可以替代javascript的window.setTimeout、window.clearTimeout 的使用,而且还可以避免设置javascript的全局变量,从而保持代码的整洁。插件的说明链接(只找到英文的)在此:JQuery.timers。这个插件的组成很朴素,就是一个名叫 JQuery.timers.js 的文件,使用的时候可千万别忘记包含。


扩展和联想:

访客的留言(10)

  1. 厉害,野草添加的JiaThis的代码,估计实现方法跟你这个类似:)

  2. 关于技术面,我是个白痴,只好用插件解决了,哈哈

  3. 正在学习中,感谢好博文。。

  4. LittleBT :

    看了你的方法,觉得你很有创意,这方法很不错,赞一个
    我有一点想法,可以调用$(window).scroll(function()….) 但是在内部延时执行变位置的代码,这样应该不会有闪烁吧

    • 谢谢夸奖。你的想法,我没有试过,感觉上:如果在scroll的内部采用延时,屏幕也将不会闪烁,但是对游览器的压力依然较大,因为在屏幕上拖动鼠标就会触发scroll,这个动作比定时器触发要频繁一些。

欢迎留言