实现漂亮的XP效果！

Posted on 2006-08-30 12:51 东人EP 阅读(911) 评论(8) 编辑收藏引用所属分类: Ajax

这是Html显示页面源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Image crop - DHTML user interface</title>

</head>

<body>

<div>

<form>

<table>

<tr>

<td>1235<br>fdfds</td>

</tr>

</table>

</form>

</div>

<div>

<table>

<tr>

<td><b>Picture from Norway</b></td>

</tr>

<tr>

<td>Dimension: <span id="label_dimension"></span></td>

</tr>

</table>

</div>

<div>

To select crop area, drag and move the dotted rectangle or type in values directly into the form.

</div>

<div>

To select crop area, drag and move the dotted rectangle or type in values directly into the form.

</div>

initDhtmlgoodies_xpPane(Array('Crop inspector','Image details','Instructions','NewExtented'),Array(true,true),Array('pane1','pane2'));

</script>

</body>

</html>

下面的这段代码是JS文件代码：

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

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

You are free to use this script as long as the copyright message is kept intact. However, you may not

redistribute, sell or repost it without our permission.

Updated:

February, 22nd 2006 - Instead of skipping onclick events when slide is in progress, start sliding in the other direction if mouse is clicked the second time.

Thank you!

www.dhtmlgoodies.com

Alf Magne Kalleland

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

/* Update LOG

January, 28th - Fixed problem when double clicking on a pane(i.e. expanding and collapsing).

var xpPanel_slideActive = true; // Slide down/up active?

var xpPanel_slideSpeed = 15; // Speed of slide

var dhtmlgoodies_xpPane;

var dhtmlgoodies_paneIndex;

var savedActivePane = false;

var savedActiveSub = false;

var xpPanel_currentDirection = false;

var cookieNames = new Array();

These cookie functions are downloaded from

http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm

function Get_Cookie(name) {

var start = document.cookie.indexOf(name+"=");

var len = start+name.length+1;

if ((!start) && (name != document.cookie.substring(0,name.length))) return null;

if (start == -1) return null;

var end = document.cookie.indexOf(";",len);

if (end == -1) end = document.cookie.length;

return unescape(document.cookie.substring(len,end));

}

// This function has been slightly modified

function Set_Cookie(name,value,expires,path,domain,secure) {

expires = expires * 60*60*24*1000;

var today = new Date();

var expires_date = new Date( today.getTime() + (expires) );

var cookieString = name + "=" +escape(value) +

( (expires) ? ";expires=" + expires_date.toGMTString() : "") +

( (path) ? ";path=" + path : "") +

( (domain) ? ";domain=" + domain : "") +

( (secure) ? ";secure" : "");

document.cookie = cookieString;

}

function cancelXpWidgetEvent()

{

return false;

}

function showHidePaneContent()

{

var img = this.getElementsByTagName('IMG')[0];

var numericId = img.id.replace(/[^0-9]/g,'');

var obj = document.getElementById('paneContent' + numericId);

if(img.src.toLowerCase().indexOf('up')>=0){

img.src = img.src.replace('up','down');

if(xpPanel_slideActive){

obj.style.display='block';

xpPanel_currentDirection = (xpPanel_slideSpeed*-1);

slidePane((xpPanel_slideSpeed*-1), obj.id);

}else{

obj.style.display='none';

}

if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'0',100000);

}else{

img.src = img.src.replace('down','up');

if(xpPanel_slideActive){

if(document.all){

obj.style.display='block';

//obj.style.height = '1px';

}

xpPanel_currentDirection = xpPanel_slideSpeed;

slidePane(xpPanel_slideSpeed,obj.id);

}else{

obj.style.display='block';

subDiv = obj.getElementsByTagName('DIV')[0];

obj.style.height = subDiv.offsetHeight + 'px';

}

if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'1',100000);

}

return true;

}

function slidePane(slideValue,id)

{

if(slideValue!=xpPanel_currentDirection){

return false;

}

var activePane = document.getElementById(id);

if(activePane==savedActivePane){

var subDiv = savedActiveSub;

}else{

var subDiv = activePane.getElementsByTagName('DIV')[0];

}

savedActivePane = activePane;

savedActiveSub = subDiv;

var height = activePane.offsetHeight;

var innerHeight = subDiv.offsetHeight;

height+=slideValue;

if(height<0)height=0;

if(height>innerHeight)height = innerHeight;

if(document.all){

activePane.style.filter = 'alpha(opacity=' + Math.round((height / subDiv.offsetHeight)*100) + ')';

}else{

var opacity = (height / subDiv.offsetHeight);

if(opacity==0)opacity=0.01;

if(opacity==1)opacity = 0.99;

activePane.style.opacity = opacity;

}

if(slideValue<0){

activePane.style.height = height + 'px';

subDiv.style.top = height - subDiv.offsetHeight + 'px';

if(height>0){

setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);

}else{

if(document.all)activePane.style.display='none';

}

}else{

subDiv.style.top = height - subDiv.offsetHeight + 'px';

activePane.style.height = height + 'px';

if(height<innerHeight){

setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);

}

function mouseoverTopbar()

{

var img = this.getElementsByTagName('IMG')[0];

var src = img.src;

img.src = img.src.replace('.gif','_over.gif');

var span = this.getElementsByTagName('SPAN')[0];

span.style.color='#428EFF';

}

function mouseoutTopbar()

{

var img = this.getElementsByTagName('IMG')[0];

var src = img.src;

img.src = img.src.replace('_over.gif','.gif');

var span = this.getElementsByTagName('SPAN')[0];

span.style.color='';

}

function initDhtmlgoodies_xpPane(panelTitles,panelDisplayed,cookieArray)

{

dhtmlgoodies_xpPane = document.getElementById('dhtmlgoodies_xpPane');

var divs = dhtmlgoodies_xpPane.getElementsByTagName('DIV');

dhtmlgoodies_paneIndex=0;

cookieNames = cookieArray;

for(var no=0;no<divs.length;no++){

if(divs[no].className=='dhtmlgoodies_panel'){

var outerContentDiv = document.createElement('DIV');

var contentDiv = divs[no].getElementsByTagName('DIV')[0];

outerContentDiv.appendChild(contentDiv);

outerContentDiv.id = 'paneContent' + dhtmlgoodies_paneIndex;

outerContentDiv.className = 'panelContent';

var topBar = document.createElement('DIV');

topBar.onselectstart = cancelXpWidgetEvent;

var span = document.createElement('SPAN');

span.innerHTML = panelTitles[dhtmlgoodies_paneIndex];

topBar.appendChild(span);

topBar.onclick = showHidePaneContent;

if(document.all)topBar.ondblclick = showHidePaneContent;

topBar.onmouseover = mouseoverTopbar;

topBar.onmouseout = mouseoutTopbar;

topBar.style.position = 'relative';

var img = document.createElement('IMG');

img.id = 'showHideButton' + dhtmlgoodies_paneIndex;

img.src = 'images/arrow_up.gif';

topBar.appendChild(img);

if(cookieArray[dhtmlgoodies_paneIndex]){

cookieValue = Get_Cookie(cookieArray[dhtmlgoodies_paneIndex]);

if(cookieValue)panelDisplayed[dhtmlgoodies_paneIndex] = cookieValue==1?true:false;

}

if(!panelDisplayed[dhtmlgoodies_paneIndex]){

outerContentDiv.style.height = '0px';

contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';

if(document.all)outerContentDiv.style.display='none';

img.src = 'images/arrow_down.gif';

}

topBar.className='topBar';

divs[no].appendChild(topBar);

divs[no].appendChild(outerContentDiv);

dhtmlgoodies_paneIndex++;

}

下面是CSS效果代码：

#dhtmlgoodies_xpPane{

background-color:#7190e0;

float:left;

height:1200px;

width:200px;

}

#dhtmlgoodies_xpPane .dhtmlgoodies_panel{

margin-left:10px;

margin-right:10px;

margin-top:10px;

}

#dhtmlgoodies_xpPane .panelContent{

font-size:0.7em;

background-image:url('../images/bg_pane_right.gif');

background-position:top right;

background-repeat:repeat-y;

border-left:1px solid #FFF;

border-bottom:1px solid #FFF;

padding-left:2px;

padding-right:2px;

overflow:hidden;

position:relative;

}

#dhtmlgoodies_xpPane .panelContent div{

position:relative;

}

#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{

background-image:url('../images/bg_panel_top_right.gif');

background-repeat:no-repeat;

background-position:top right;

height:25px;

padding-right:5px;

cursor:pointer;

}

#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{

line-height:25px;

vertical-align:middle;

font-family:arial;

font-size:0.7em;

color:#215DC6;

font-weight:bold;

float:left;

padding-left:5px;

}

#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{

float:right;

cursor:pointer;

}

form{

margin:0px;

}

由于无法将图片传上，大家有需求可以给我留言或是给我留下邮箱地址，我可以给源码发给各位！

Feedback

# re: 实现漂亮的XP效果！回复 更多评论

2006-08-31 09:59 by ihaveonlybelief

可以给我一份吗?
ihaveonlybelief@gmail.com
谢谢!

# re: 实现漂亮的XP效果！回复 更多评论

2006-08-31 22:18 by 快乐着飞舞着

可以给我发一份么？
reene2008###hotmail.com

plz '###'->'@'

thx!

# re: 实现漂亮的XP效果！回复 更多评论

2006-09-05 15:36 by qin

zhgsky@sina.com
给一份吧~谢谢~~

# re: 实现漂亮的XP效果！回复 更多评论

2006-09-06 22:19 by programmer

csharp_programmer@163.com
给份吧.谢谢!

# re: 实现漂亮的XP效果！回复 更多评论

2007-07-07 13:40 by HRB_IT

太好了。找了很久类似的东西，终于有高人出了。
我代表人民感谢你。

呵呵。。。。我也需要来一份
十分感谢

HRB_IT@163.COM

# re: 实现漂亮的XP效果！回复 更多评论

2007-07-08 21:35 by yuike

能不能也给我一份,yuike2008@163.com

# re: 实现漂亮的XP效果！回复 更多评论

2007-08-22 16:40 by 什么什么

不知道现在还有没有。。有的话给我一份万分感谢！！ likethis1452@sina.com

# re: 实现漂亮的XP效果！回复 更多评论

2007-11-21 15:45 by wsbjwjt

不知道现在还有没有。。有的话给我一份万分感谢！！wsbjwjt@yahoo.com.cn

刷新评论列表

只有注册用户登录后才能发表评论。

东人EP的内陆空间！