posts - 77, comments - 54, trackbacks - 0, articles - 0
  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

实现漂亮的XP效果!

Posted on 2006-08-30 12:51 东人EP 阅读(700) 评论(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>
    
<link rel="stylesheet" href="css/xp-info-pane.css">
    
<script type="text/javascript" src="js/xp-info-pane.js"></script>
</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">  
    
<div class="dhtmlgoodies_panel">
        
<div>
            
<!-- Start content of pane -->
            
<form>
            
<table>
                
<tr>
                    
<td>1235<br>fdfds</td>
                
</tr>    
            
</table>    
            
</form>
            
<!-- End content -->
        
</div>    
    
</div>
    
<div class="dhtmlgoodies_panel">
        
<div>
            
<!-- Start content of pane -->
            
<table>
                
<tr>
                    
<td><b>Picture from Norway</b></td>
                
</tr>
                
<tr>
                    
<td>Dimension: <span id="label_dimension"></span></td>
                
</tr>
            
</table>
            
<!-- End content -->
        
</div>        
    
</div>
    
<div class="dhtmlgoodies_panel">
        
<div>
            
<!-- Start content of pane -->
            
&copy;
            To select crop area, drag and move the dotted rectangle or type in values directly into the form.
            
            
<!-- End of content -->
        
</div>        
    
</div>
        
<div class="dhtmlgoodies_panel">
        
<div>
            
<!-- Start content of pane -->
            
            To select crop area, drag and move the dotted rectangle or type in values directly into the form.
            
            
<!-- End of content -->
        
</div>        
    
</div>
</div>

<script type="text/javascript">
    initDhtmlgoodies_xpPane(Array('Crop inspector','Image details','Instructions','NewExtented'),Array(
true,true),Array('pane1','pane2'));
</script>
 
</body>
</html>

    
    

下面的这段代码是JS文件代码:
    /************************************************************************************************************
    (C) www.dhtmlgoodies.com, October 2005
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    
    
    Terms of use:
    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 == -1return 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
只有注册用户登录后才能发表评论。