图片转换效果

网站 2005-10-12 10:54

页面：点这儿参观

制作方法
将下面的代码复制到<head>~</head>里

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将下面的代码复制到<head>~</head>里

/*** variables to configure... ***/

var numScrollPages = 4         //Set the number of pages (layers) here.
var transitionOut = 1;         //The 'out' effect... 0= no effect, 1= fade
var transitionIn = 1;          //The 'in' effect... 0= no effect, 1= fade, 2= slide
var slideAcceleration = 0.2;   //If you use the slide animation, set this somewhere between 0 and 1.

if(document.layers){ //NS4 resize fix...
	scrX= innerWidth; scrY= innerHeight;
	onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
function scrollerobj(obj,nest){
	nest = (!nest)?"":'document.'+nest+'.'
	this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
	this.css = bw.ns4?this.elm:this.elm.style
	this.doc = bw.ns4?this.elm.document:document
	this.obj = obj+'scrollerobj'; eval(this.obj+'=this')
	this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
	this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
	this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0
	this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}
//object methods...
scrollerobj.prototype.moveTo = function(x,y){
	if(x!=null){this.x=x; this.css.left=x}
	if(y!=null){this.y=y; this.css.top=y}
}
scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}

/****************************************************************/

//============ 变换设置 ==========
function startshow(num){
	if (num == 1)  
		{ num = 2; }
	else 
		if (num == 2) 
			{ num = 3; }
		else
			if (num == 3) 
				{ num = 4; }
			else
				if (num == 4) 
					{ num = 1; }
	setTimeout('activate('+num+')',1000);
}

scrollerobj.prototype.blend= function(vis, fn){
	if (bw.ie5||bw.ie6 && !bw.mac) {
		if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';
		else this.css.filter= 'blendTrans(duration=0.6)';
		this.elm.onfilterchange = function(){ eval(fn); };
		this.elm.filters.blendTrans.apply();
		this.css.visibility= vis;
		this.elm.filters.blendTrans.play();
	}
	else if (bw.ns6 || bw.ie&&!bw.mac){
		this.css.visibility= 'visible';
		vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);
	}
	else {
		this.css.visibility= vis;
		eval(fn);
	}
};

var pageslidefadeLoaded = 0;
function initPageSlideFade(){
	scroller1 = new scrollerobj('divScroller1');
	
	pages = new Array();
	pages[0] = null;
	for (var i=1; i<=numScrollPages; i++){
		pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');
		pages[i].moveTo(0,0);
	}
	bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6
	if (bw.ie5||bw.ie6 && !bw.mac) pages[1].css.filter= 'blendTrans(duration=0.6)'; // Loads the windows 9.x filters module.
	activateContinue(1);

//if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;
	pageslidefadeLoaded = 1;
}
//if the browser is ok, the script is started onload..
if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[color=red]
添加或修改一个图层效果，注解：   
  第一步：在divScroller1图层内添加一个新的图层：
<div id=divScroller1> 
......
<div class=dynPage id=dynPage5>显示内容</div>
</div> 
--------------------------------------------------------------------------------
第二步：Javascript中找到如下这行：
var numScrollPages = 5　　// 设置图层显示总数
--------------------------------------------------------------------------------
 第三步：Javascript中找到如下这段：
//============ 变换设置 ==========
function startshow(num){
　if (num == 1) 
　　{ num = 2; }
　else 
　　if (num == 2) 
　　　{ num = 3; }
　　else
　　　if (num == 3) 
　　　　{ num = 4; }
　　　else
　　　　if (num == 4) 
　　　　　{ num = 1; }
修改成：
function startshow(num){
　if (num == 1) 　　　　　　　　　// 开始显示图层1
　　{ num = 2; }　　　　　　　　　// 转到图层2
　else 
　　if (num == 2) 　　　　　　　　// 开始显示图层2
　　　{ num = 3; }　　　　　　　　// 转到图层3
　　else
　　　if (num == 3) 　　　　　　　// 开始显示图层3
　　　　{ num = 4; }　　　　　　　// 转到图层4
　　　else
　　　　if (num == 4) 　　　　　　// 开始显示图层4
　　　　　{ num = 5; } 　　　　　// 转到图层5
　　　　else
　　　　　if (num = 5) 　　　　　// 开始显示图层5
　　　　　　{ num = 1; } 　　　　// 转到图层1，这就组成了一个循环过程。 
  至此你就可以完成这个实例了，快去试试吧！  
[/color]

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

标签集:TAGS:

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}

{commentcontent}

□浮生蕭條□

日志分类Categories

日历表calendar

最新发表Latest Posts

最近推荐Highlights

最新回复Comments

统计信息Total info

日志搜索Search

友情链接My Friends

其他信息Other

图片转换效果

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}