纯js文章内容翻页显示特效-网页编程网

当前位置：主页 >> 网页特效 >> 正文

纯js文章内容翻页显示特效

阅读：3293 输入：2016-08-12 17:42:15

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标经过链接文字滚动</title>
<style type="text/css">
#divControl {position:absolute; left:120px; top:190px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divCont    {position:absolute; left:120px;top:250px; width:250px; height:150px; clip:rect(0px 250px 150px 0px);}
.clScroll   {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()
/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/
//The speed of the timeout between each scroll.
timSpeed = 50
//The height of the container (change this when it scrolls to much or to little)
contHeight = 100
/*********************************************************************************
This is the object constructor function, which applies
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(obj,nest){
	nest=(!nest) ? "":'document.'+nest+'.'
	this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
  	this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
	this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
	this.top=b_gettop
	return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
//Getting the top for the top method
function b_gettop(){
	var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
	clearTimeout(scrollTim)
	way = speed>0?1:0
	if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
		oScroll[active].css.top = (oScroll[active].top()+speed)+px
		scrollTim = setTimeout("scroll("+speed+")",timSpeed)
	}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
	clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
	oScroll[active].css.visibility = "hidden"
	active = num
	oScroll[active].css.top = 0+px
	oScroll[active].css.visibility = "visible"
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
	oScroll = new Array()
	// You can add and remove scrollObjects here.
	oScroll[0] = new makeScrollObj('divScroll1','divCont')
	oScroll[1] = new makeScrollObj('divScroll2','divCont')
	oScroll[2] = new makeScrollObj('divScroll3','divCont')
	oScroll[3] = new makeScrollObj('divScroll4','divCont')
	oScroll[0].css.left = 0+px
	oScroll[0].css.top = 0+px
	oScroll[0].css.visibility = "visible"
	oControl = new makeScrollObj('divControl')
	oControl.css.visibility = "visible"
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload = scrollInit;
</script>
<div id="divControl">
	<a href="#" onclick="changeActive(0); return false">第一页</a>
	<a href="#" onclick="changeActive(1); return false">第二页</a>
	<a href="#" onclick="changeActive(2); return false">第三页</a>
	<a href="#" onclick="changeActive(3); return false">第四页</a>
	<br><br>
	<a href="#" onmouseover="scroll(5)" onmouseout="noScroll()" onclick="return false">向上</a>
	<a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()" onclick="return false">向下</a>
</div>
<div id="divCont">
	<div id="divScroll1" class="clScroll">
		<br>    在主场击败灰熊之前，快船已经在他们之前9场的比赛当中输掉了8场，即便是大话连篇的主教练金特里也不得不承认这是他在教练生涯里所经历的最为黯淡的时刻。但是即便是这样严重的危机也没有触动金特里固执的神经，在主场击败灰熊之后，金特里又感觉良好地走在了老路上。金特里必须知道：“一场胜利并不意味着情况得到了扭转，不断下沉的快船有太多的窟窿要紧急修补。”
<br>    即使只从数据上来看，快船的退步也是十分明显的，他们的平均得分已经从每场95.7分下降到92.5分，命中率从43.8%下降到43.3%，篮板数从每场43.5个下降到41.7个，快船队的技术统计在全面下降，当然也有一些数据在升高，比如失误数，他们现在平均每场比赛失误16.5次。
<br>    金特里直到现在还在坚持，一旦快船队的主力球员能够从伤病中康复，一旦他能够重新拥有全部的队员，一切都会重归平静，快船队又会成为一支实力不俗的强队。他的全部论断都是建立在快船队这个赛季仅有的几场拿的出手的胜利。比如他们战胜活塞，击败马刺，以及两胜火箭。
<br>    我必须说我同意金特里的部分观点，那就是这支球队的确充满了潜力，而且的确有很多货真价实的天才。但是要知道，在这个联盟之中，同样充满潜力的球队并不在少数，偶尔的一场漂亮胜利，任何一支球队都能够取得，问题的关键是能否持续稳定地表现出较高地竞技水准。快船有足够的条件让自己成为一支强队，前提是他们必须找到正确的方法。
<br>    米勒是一个关键性的球员，因为伤病而只在本赛季出场六次的小前锋奥多姆也同样是一个不可多得的天才。奥洛沃坎迪也是一个处在上升期的优秀球员，但是球队糟糕的战绩能否留住他可是一个大大的问号。理查德森、马格特、皮亚考斯基、贾里奇都是能够用的上的球员，还有投手的问题，快船糟糕的命中率不是他们缺乏投手造成的，可以信赖的中国球员王治郅在大部分时间里，都被金特里放在了板凳上。他有足够优秀的才能来为快船队出力，但是前提是金特里必须意识到这一点。
<br>    如果让我坦率地讲出我对这支球队目前的印象的话，可能会让金特里有些难受。zzjs .net打造国内最帅的网页特效站，在防守的时候又站位稀松，他们没有一丝一毫地成为金特里所说的“强大球队”的迹象。明白地说如果他们不立刻修补他们自己的窟窿的话，船会沉的。
<br>    如果金特里仍然梦想带领快船跻身季后赛的话，他就必须在剩下的比赛中取得28场以上的胜利。这个目标显然让更多的人相信，他们已经和季后赛说再见了，但是即使如此，对于这支年轻的球队来说，在未来的比赛当中表现出一支季后赛球队应该具备的水准仍然是十分必要的。因为这样他们至少还能拥有尊严。
<br>    在受伤的球员逐渐回归主力阵容之后，快船队在实力上显然已经具备了取得佳绩的条件，在这种情况下，主教练金特里能否正确地运用他的球队就成为了快船队能否前进的关键。
<br>    金特里首先要做的就是改进球队的防守，如果不能够限制住对手的得分，尤其遏制住对手的快攻，快船队要想取得理想的战绩就会变得十分的艰难。此外还有投手的问题，金特里必须解决，那些认为有一两个主力队员回归之后，得分就会大幅度增加的想法过于天真。金特里必须明白有太多的事情需要他去改变，如果他还有欲望去取得胜利。(飞鹰编译)
	</div>
	<div id="divScroll2" class="clScroll">
		<br>站长特效　卡塔尔多哈当地时间1月13日下午4点，备战十国赛的中国国奥队进行了第二次训练。在这次训练中，主教练沈祥福进行了分组对抗的小场地比赛，主力阵容浮出水面。图为周麟再做准备活动。(何其/摄)
 <br>
	</div>
	<div id="divScroll3" class="clScroll">
		科比-布莱恩特
　　1月7日，湖人VS超音速，个人独得45分，其中包括创纪录的12个三分球，湖人119-98战胜超音速；
　　1月10日，湖人VS骑士，得到个人职业生涯第八次三双，21分、10个篮板、11次助攻、4次抢断、3次高帽，湖人115-99战胜骑士；
　　1月12日，湖人VS热队，得到36分、4次助攻、4次抢断以及3个篮板，湖人106-81战胜热队。
		<br>
	</div>
	<div id="divScroll4" class="clScroll">
		小奥尼尔
　　1月6日，步行者VS76人，得到17分(包括最后1.7秒钟投中决定胜负的一球)、13个篮板以及3次盖帽，步行者105-104加时赛战胜76人队；
　　1月8日，步行者VS尼克斯，得到16分、8个篮板、2次助攻、2次抢断，步行者主场取胜；
　　1月10日，步行者VS魔术队，得到21分，4个篮板、4次助攻、3次抢断，步行者101-97加时赛战胜魔术；
　　1月11日，步行者VS勇士，得到23分、12个篮板、5次盖帽、3次助攻，步行者战胜勇士，这是小奥尼尔上周发挥最好的一场比赛。
	</div>
</div>
</body>
</html>

相关阅读: 链接文字定时变色显示特效; 纯js两个列表框内容互换; 漂浮广告图片点击隐藏特效