初试css和js

刚刚在逛校内的时候遇到一同学,有个小问题需要解决:写出“新浪体育频道滑动门效果文字滚动特效”。好在还有个样例,于是先观察了一下例子:

是一个很普通的文字滑块滑动特效。而要求将这个纵向的改成横向的。

于是操起chrome的审查元素功能开始查看这个滑块的原理:

先定义出来4个滑块,按照上下顺序依次排开,每经过几秒钟就向上移动一个滑块,依次类推……

这个里面涉及了几个知识点如下:

1.css中对于位置的定义:left: top:height:等等

2.position 中absolute和relative的用法区别

3.滑块运动控制scrollLeft和scrollTop等函数

4.自己编写按时间等待的滑动函数

首先定义好4个滑块的大小和位置,并且写好滑块之间的位置关系:

<div id=”f2″ style=”z-index: 10; left: 320px; width: 320px;
position: absolute; top: 0px; height: 85px;”>//这个是第二个滑块

<div id=”f3″ style=”z-index: 10; left: 640px; width: 320px;
position: absolute; top: 0px; height: 85px;”>//这个是第三个滑块

 

然后编写按时间等待的滑动函数:

<script language="javascript" type="text/javascript">
//<![CDATA[
var curFrame=1; //当前标签
var frameheight = 320; //单层高度
var speed = 5; //滚动速度
var waitTime = 4000; //自动播放间隔时间
var scrollItv;
var autoItv;
var maindiv = document.getElementById("main");
autoItv = setInterval(autoSlide, waitTime);
function slideTo(id){
	curFrame = id;
	var curTop = maindiv.scrollLeft;
	var tarTop = frameheight*(id-1);
	var step = curTop>tarTop?-speed:speed;
	clearInterval(autoItv);
	clearInterval(scrollItv);
	scrollItv = setInterval(function(){
		maindiv.scrollLeft += step;
		if(Math.abs(maindiv.scrollLeft-tarTop)<speed){
		clearInterval(scrollItv);
		maindiv.scrollLeft = tarTop;
		autoItv = setInterval(autoSlide, waitTime);
		}
	},20);
	for(i=1;i<=4;i++){
		document.getElementById('led'+i).className='NUM1';
	}
	document.getElementById('led'+curFrame).className='NUM2';
}
function autoSlide(){
	if(curFrame<4){curFrame++;}else{curFrame=1;}
	slideTo(curFrame);
}
//]]>
</script>

这里的重要地方为:

var frameheight = 320; 

scrollLeft

这样就能够实现横向滑动了。

点此下载源文件                                点此下载更改后的文件

4 Comments

有前途。。。
另外有个框架叫做jQuery。。。

* 笑得海潮 says:

对网页各种不懂啊……不过看wiki上介绍jQuery相当不错的说……以后可以考虑尝试一下。

蛋壳 says:

这个网站是你自己做的吗

* 笑得海潮 says:

博客是用的wordpress的,这篇文章中提到的那个是自己写的

Leave a Reply

Your email address will not be published.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax