[开源]N个经典的JS效果，今日(7.18)更新一个 - JavaScript论坛

#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3A81C8;
border-right-color: #3A81C8;
border-bottom-color: #3A81C8;
border-left-color: #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff950b;
border-right-color: #ff950b;
border-bottom-color: #ff950b;
border-left-color: #ff950b;
background-color: #FFECD2;
}
.content3 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE74B8;
border-right-color: #FE74B8;
border-bottom-color: #FE74B8;
border-left-color: #FE74B8;
background-color: #FFECF5;
}
.content4 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00988B;
border-right-color: #00988B;
border-bottom-color: #00988B;
border-left-color: #00988B;
background-color: #E8FFFD;
}
.content5 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #A8BC1F;
border-right-color: #A8BC1F;
border-bottom-color: #A8BC1F;
border-left-color: #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language=\"javascript\">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{
if (\"tag\"+i==tag)
{
document.getElementById(tag).getElementsByTagName(\"a\")[0].className=\"selectli\"+i;
document.getElementById(tag).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"selectspan\"+i;
}else{
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].className=\"\";
document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"\";
}
if (\"content\"+i==content)
{
document.getElementById(content).className=\"\";
}else{
document.getElementById(\"content\"+i).className=\"hidecontent\";
}
document.getElementById(\"content\").className=content;
}
}
</script>
</head>
<body>
<div id=\"container\">
<div id=\"title\">
<ul>
<li id=\"tag1\"><a href=\"#\" onclick=\"switchTag('tag1','content1');this.blur();\" class=\"selectli1\"><span class=\"selectspan1\">首页</span></a></li>
<li id=\"tag2\"><a href=\"#\" onclick=\"switchTag('tag2','content2');this.blur();\"><span>下载中心</span></a></li>
<li id=\"tag3\"><a href=\"#\" onclick=\"switchTag('tag3','content3');this.blur();\"><span>产品介绍</span></a></li>
<li id=\"tag4\"><a href=\"#\" onclick=\"switchTag('tag4','content4');this.blur();\"><span>会员注册与登录</span></a></li>
<li id=\"tag5\"><a href=\"#\" onclick=\"switchTag('tag5','content5');this.blur();\"><span>联系我们</span></a></li>
</ul>
</div>
<div id=\"content\" class=\"content1\">
<div id=\"content1\"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>
<div id=\"content2\" class=\"hidecontent\">2、不同的项目使用不同的颜色来区分</div>
<div id=\"content3\" class=\"hidecontent\">3、这回需要使用到js了，呵呵</div>
<div id=\"content4\" class=\"hidecontent\">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
<div id=\"content5\" class=\"hidecontent\">5、这是使用到的两个图片：
<table width=\"58%\" border=\"1\" cellspacing=\"2\" cellpadding=\"0\">
<tr>
<td width=\"70%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif\" width=\"250\" height=\"290\" /></td>
<td width=\"30%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif\" width=\"15\" height=\"290\" /></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>无标题文档</title>
<style type=\"text/css\">

</style>
<script language=\"javascript\" type=\"text/javascript\">
//----------------------------------------------------------------------------------------------
// 功能说明：用于放大图片的滚动条，可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
// 使用方法：在图片代码里加上resizeable=1，同时在onload事件里加上createResizeScroll函数
// code by: blues[2007-7-17]
//----------------------------------------------------------------------------------------------
//始初化变量
var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser;
//------------------------------------------------------------------------------------------------
//页面初始化函数
//------------------------------------------------------------------------------------------------
function winInit(){
//检测浏览器类型
var __Agt = navigator.userAgent.toLowerCase();
var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);
if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);
var _Br=__If[1], _Ver=__If[2];
__Agt=null,__If=null;
if(_Br==\"msie\"){iBrowser=0;}
else if(_Br==\"firefox\"){iBrowser=1;}
else{iBrowser=2;}
}
//------------------------------------------------------------------------------------------------
//加上滚动条
//------------------------------------------------------------------------------------------------
function createResizeScroll(){
var objs=getByTag(\"IMG\");
var i,endi=objs.length;
var oFunc;
for(i=0;i<endi;i++){
if(objs[i].getAttribute(\"resizeable\")==\"1\"){
var oFuncBox=document.createElement(\"DIV\");//滚动条框
var oFuncLine=document.createElement(\"DIV\");//滚动条背景
var oFuncBut=document.createElement(\"P\");//滚动条本体
oFuncBut.style.marginLeft=\"5px\";
oFuncBut._forobj=objs[i];
oFuncBut.onmousedown=readyMoveScrollBut;
oFuncBut.onmouseup=doneMoveScrollBut;
oFuncBox.className=\"scrollX\";
oFuncBox.style.display=\"none\";
oFuncBox.onmouseover=function(){this.style.display='block';};
oFuncBox.onmouseout=function(){this.style.display='none';};
oFuncBox.onselectstart=oFuncLine.onselectstart=oFuncBut.onselectstart=function(){return false;};//防止被选中
oFuncBox._type=oFuncLine._type=oFuncBut._type=\"ScrollX\";//给滚动条框加上标志，鼠标移出滚动条框后就要中止
oFuncLine.appendChild(oFuncBut);
oFuncBox.appendChild(oFuncLine);
objs[i].parentNode.insertBefore(oFuncBox,objs[i]);
objs[i]._width=objs[i].width;
objs[i]._height=objs[i].height;
objs[i].onmouseover=function(){this.parentNode.childNodes[0].style.display=\"block\";};
objs[i].onmouseout=function(){this.parentNode.childNodes[0].style.display=\"none\";};
}
}
}
//------------------------------------------------------------------------------------------------
//准备移动
//------------------------------------------------------------------------------------------------
function readyMoveScrollBut(e){
oScroll=this;
sScrollState=\"move\";
iScrollPos=getPostion(\"x\",e);//获取鼠标坐标并保存
this._left=parseInt(this.style.marginLeft);
var img=this._forobj;
var oImg=new Image;
oImg.src=img.src;
//滚动条的移动范围是200像素
//这里计算出宽高的换算比例并保存
img._wbl=(oImg.width-img._width)/200;
img._hbl=(oImg.height-img._height)/200;
}
//------------------------------------------------------------------------------------------------
//完成并清除全局变量
//------------------------------------------------------------------------------------------------
function doneMoveScrollBut(e){
oScroll=null;
sScrollState=null;
iScrollPos=0;
}
//------------------------------------------------------------------------------------------------
//鼠标移动
//------------------------------------------------------------------------------------------------
function moveScrollBut(e){
//获取事件源
var oEvent=getEvent(e);
if(oScroll!=null && sScrollState==\"move\"){
if(oEvent._type==\"ScrollX\"){//只有在指定的范围内触发移动
var n_x=getPostion(\"x\",e);
n_x-=iScrollPos;
n_x+=oScroll._left;
if(n_x<5)n_x=5;
if(n_x>205)n_x=205;
oScroll.style.marginLeft=n_x+\"px\";
//经过计算得出滚动条的marginLeft值（margin-left的取值范围为[5~205]px）
n_x-=5;
//将滚动条的位置值换算成宽高值（之前已经计算得到了宽高的换算比例），赋给图片
var img=oScroll._forobj;
img.width=n_x*img._wbl+img._width;
img.height=n_x*img._hbl+img._height;
}else{doneMoveScrollBut();}
}
}
//------------------------------------------------------------------------------------------------
//给对象的指定事件加上函数功能
//------------------------------------------------------------------------------------------------
function AttachEvent(object,eventName,func,cancelBubble){
var cb=cancelBubble?true:false;
eventName=eventName.toLowerCase();
if(document.attachEvent){object.attachEvent(eventName,func);}
else{object.addEventListener(eventName.substr(2),func,cb);}
}
//------------------------------------------------------------------------------------------------
//简写函数
//------------------------------------------------------------------------------------------------
function getById(str){return document.getElementById(str);}
function getByName(str){return document.getElementsByName(str);}
function getByTag(str){return document.getElementsByTagName(str);}
//------------------------------------------------------------------------------------------------
//获取鼠标坐标
//------------------------------------------------------------------------------------------------
function getPostion(XorY,e){
if(iBrowser==0){
if(XorY==\"x\"){return event.x;}
else if(XorY==\"y\"){return event.y;}
else{return false;}
}
else{
if(XorY==\"x\"){return e.pageX;}
else if(XorY==\"y\"){return e.pageY;}
else{return false;}
}
}
//------------------------------------------------------------------------------------------------
//获取事件对象
//------------------------------------------------------------------------------------------------
function getEvent(e){
if(iBrowser==0){return event.srcElement;}
else{return e.target;}
}
//------------------------------------------------------------------------------------------------
//加入事件监听
//------------------------------------------------------------------------------------------------
AttachEvent(window,\"onload\",winInit,false);
AttachEvent(window,\"onload\",createResizeScroll,false);
AttachEvent(document,\"onmousemove\",moveScrollBut,false);
AttachEvent(document,\"onmouseup\",doneMoveScrollBut,false);
</script>
</head>
<body>
<div style=\"margin:10px 0 0 40px;padding:10px 0;\">
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Bluehills.jpg\" height=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Sunset.jpg\" width=\"300\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Waterlilies.jpg\" width=\"200\" resizeable=\"1\" galleryimg=\"no\" /></div>
<div class=\"img\"><img src=\"http://www.blueshut.com/cj/Winter.jpg\" width=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
</div>
</body>
</html>

<body>

<SCRIPT type=text/javascript>
var varText = \"\"
function addInfo(title,photourl,link){
if(varText!=\"\"){
varText+=\"|||\";
}
varText+=title+\"|_|\"+photourl+\"|_|\"+link;
}
addInfo(\"大图图片推荐一\",\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/images/datu/01.jpg\",\"http://www.juese.com\");
　　　　addInfo(\"大图图片推荐二\",\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/images/datu/02.jpg\",\"http://www.juese.com\");
　　　　addInfo(\"大图图片推荐三\",\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/images/datu/03.jpg\",\"http://www.juese.com\");
　　　　addInfo(\"大图图片推荐四\",\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/images/datu/04.jpg\",\"http://www.juese.com\");
addInfo(\"大图图片推荐五\",\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/images/datu/05.jpg\",\"http://www.juese.com\");
//
document.write('<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0\" width=\"542\" height=\"225\" id=\"01\" align=\"left\">')
document.write('<param name=\"allowScriptAccess\" value=\"sameDomain\" />')
document.write('<param name=\"movie\" value=\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/02.swf?info='+varText+'\" />')
document.write('<param name=\"quality\" value=\"high\" />')
document.write('<param name=\"bgcolor\" value=\"#ffffff\" /><param name=\"wmode\" value=\"transparent\" />')
document.write('<embed src=\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/02.swf\" quality=\"high\" bgcolor=\"#ffffff\" width=\"542\" height=\"225\" name=\"01\" align=\"left\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />')
document.write('</object>')
</SCRIPT>
<p>
<a href=\"http://www.soojs.com/folder/flash/flash效果的图片切换_提高源flash文件/code.rar\">下载源程序</a>
</body>
</html>

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Map Image</title>
<style type=\"text/css\">
* {margin:0px auto;padding:0px;text-align:center;}
* {font-size:9pt;font-family:Arial;}
body {margin-top:20px;}
body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}
div {position:relative;width:400px;height:400px;}
font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;}
/* Img Show Zone */
#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;}
#imgShow img {border:none;}
/* Control Bar Style */
#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;}
#ctlBar[id] {bottom:-2px;right:-2px;}
.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;}
.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;}
.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;}
.ctlRight {width:15%;height:70%;float:right;overflow:hidden;}
#ctlBar img {border:none;display:block;}
.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;}
* html .ctlBottom a {margin-left:0px;margin-right:0px;}
.ctlBottom a:hover {color:#3cf;}
#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;}
#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;}
#arrLeft {float:left;margin:2px;width:16px;height:16px;}
#arrRight {float:right;margin:2px;width:16px;height:16px;}
.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;}
#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;}
#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;}
* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);}
#pre {position:relative;}
/* top:0px;left:0px; */
/* Hide ctl bar */
#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;}
* html #ctlHide {right:0px;bottom:0px;}
/* Test Other Parts */
#test {margin-top:10px;}
#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;}
</style>
<script type=\"text/javascript\">
var p=1;
var prep;
var imgp;
var px;
var py;
var msx;
var msy;
var tmpx;
var tmpy;
var dx=0;
var dy=0;
var dragfg=false;
function pDrag(e){
if(dragfg){
var pcon=document.getElementById(\"ctlCenter\");
var pdiv=document.getElementById(\"dragDiv\");
var pimg=document.getElementById(\"pre\");
var dltx=e.clientX-tmpx;
var dlty=e.clientY-tmpy;
var marl=(pcon.clientWidth-pimg.width)/2;
var marr=marl+pimg.width-pdiv.clientWidth;
var mart=(pcon.clientHeight-pimg.height)/2;
var marb=mart+pimg.height-pdiv.clientHeight;
var divt=parseInt(pdiv.style.top);
var divl=parseInt(pdiv.style.left);
var demox=divl+dltx;
var demoy=divt+dlty;
if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+\"px\";
if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+\"px\";
tmpx=e.clientX;
tmpy=e.clientY;
//return false;
}
}
function sDrag(e)
{
var temp = (typeof e.target != \"undefined\")?e.target:e.srcElement;
dx=0;
dy=0;
if(!dragfg) {
msx=e.clientX;
msy=e.clientY;
}
if(temp.id==\"dragDiv\"){
dragfg=true;
px=(typeof(e.offsetX)==\"undefined\")?e.layerX-2:e.offsetX;
py=(typeof(e.offsetY)==\"undefined\")?e.layerY-2:e.offsetY;
tmpx=e.clientX;
tmpy=e.clientY;
}
}
function eDrag(e){
dragfg=false;
var scrLeft=parseInt(document.getElementById(\"dragDiv\").style.left)-(document.getElementById(\"ctlCenter\").clientWidth-document.getElementById(\"pre\").width)/2;
var scrTop=parseInt(document.getElementById(\"dragDiv\").style.top)-(document.getElementById(\"ctlCenter\").clientHeight-document.getElementById(\"pre\").height)/2;
var ppp=document.getElementById(\"imgShow\").clientWidth/document.getElementById(\"dragDiv\").clientWidth;
o.scrollTop=scrTop*ppp;
o.scrollLeft=scrLeft*ppp;
}
</script>
</head>
<body onload=\"alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');\">
<div>
<div id=\"imgShow\">
<img id=\"pic\" src=\"http://desktop.yesky.com/picupload/20040624/1641151.jpg\" alt=\"Oops\" onMouseWheel=\"return img_zoom(event,this)\"/>
</div>
<div id=\"ctlBar\">
<div class=\"ctlTop\"><span onclick=\"document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';\">Hide</span>Design by saxon</div>
<div class=\"ctlLeft\"><br />T<br/>O<br/>O<br/>L<br/>S</div>
<div class=\"ctlRight\">
<font id=\"arrUp\" onmouseover=\"imgScroll('up');\" onmouseout=\"mvStop();\" onmousedown=\"sp=sp*2;\" onmouseup=\"sp=sp/2;\">↑</font>
<font id=\"arrDown\" onmouseover=\"imgScroll('down');\" onmouseout=\"mvStop();\" onmousedown=\"sp=sp*2;\" onmouseup=\"sp=sp/2;\">↓</font>
</div>
<div id=\"ctlCenter\"><img id=\"pre\" src=\"http://desktop.yesky.com/picupload/20040624/1641151.jpg\" alt=\"Oops\" />
<div id=\"dragDiv\" onmousedown=\"sDrag(event);\" onmousemove=\"pDrag(event);\" onmouseup=\"eDrag(event);\" onmouseout=\"eDrag(event);\"></div>
</div>
<div class=\"ctlBottom\">
<font id=\"arrLeft\" onmouseover=\"imgScroll('left');\" onmouseout=\"mvStop();\" onmousedown=\"sp=sp*2;\" onmouseup=\"sp=sp/2;\">←</font>
<a href=\"mailto:sjx.saxon@gmail.com\">sjx.saxon@gmail.com</a>
<font id=\"arrRight\" onmouseover=\"imgScroll('right');\" onmouseout=\"mvStop();\" onmousedown=\"sp=sp*2;\" onmouseup=\"sp=sp/2;\">→</font>
</div>
</div>
<span id=\"ctlHide\" onclick=\"document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';\">Display</span>
</div>
<p id=\"test\">
<img src=\"http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg\" alt=\"Oops\" onclick=\"imgChg(this.src)\" />
<img src=\"http://www.yczhang.com/upload/200606021857377727.jpg\" alt=\"Oops\" onclick=\"imgChg(this.src)\" />
<img src=\"http://desktop.yesky.com/picupload/20040624/1641151.jpg\" alt=\"Oops\" onclick=\"imgChg(this.src)\" />
<img src=\"http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG\" alt=\"Oops\" onclick=\"imgChg(this.src)\" />
</p>
<p>本地浏览IE下有效<input type=\"file\" id=\"viewLocal\" /><input type=\"button\" value=\"Change Pic\" onclick=\"chkValue('viewLocal');\" /></p>
<p>URL图片地址浏览<input type=\"text\" id=\"viewOnline\" /><input type=\"button\" value=\"Change Pic\" onclick=\"chkValue('viewOnline');\" /></p>
<script type=\"text/javascript\">
function imgChg(s){
if(document.getElementById('ctlBar').style.display==\"none\"){
document.getElementById('ctlBar').style.display=\"block\";
document.getElementById('ctlHide').style.display=\"none\";
var flag=true;
}
var newImg=document.createElement(\"img\");
newImg.id=\"pre\";
newImg.alt=\"Oops\";
newImg.onmouseout=\"eDrag(event);\"
newImg.src=s;
document.getElementById(\"pic\").src=s;
document.getElementById(\"ctlCenter\").replaceChild(newImg,document.getElementById(\"pre\"));
preImgInit();
if(flag){
document.getElementById('ctlBar').style.display=\"none\";
document.getElementById('ctlHide').style.display=\"block\";
}
o.scrollTop=0;
o.scrollLeft=0;
}
function chkValue(ob)
{
var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase();
if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value);
}
document.getElementById(\"viewOnline\").value=\"http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg\";
</script>
<script type=\"text/javascript\">
var sp=5;
var tc;
function imgScroll(d){
var ptx=o.scrollLeft;
var pty=o.scrollTop;
if(tc) clearInterval(tc);
if(d==\"up\"){
tc=setInterval(\"up()\",30);
}
else if(d==\"down\"){
tc=setInterval(\"down()\",30);
}
else if(d==\"left\"){
tc=setInterval(\"left()\",30);
}
else if(d==\"right\"){
tc=setInterval(\"right()\",30);
}
else{
return alert(\"There must be something wrong...\");
}
}
function up() {o.scrollTop -= sp;
document.getElementById(\"dragDiv\").style.top =(document.getElementById(\"ctlCenter\").clientHeight-document.getElementById(\"pre\").height)/2+o.scrollTop*prep+\"px\";}
function down() {o.scrollTop += sp;
document.getElementById(\"dragDiv\").style.top =(document.getElementById(\"ctlCenter\").clientHeight-document.getElementById(\"pre\").height)/2+o.scrollTop*prep+\"px\";}
function left() {o.scrollLeft -= sp;
document.getElementById(\"dragDiv\").style.left =(document.getElementById(\"ctlCenter\").clientWidth-document.getElementById(\"pre\").width)/2+o.scrollLeft*prep+\"px\";}
function right() {o.scrollLeft += sp;
document.getElementById(\"dragDiv\").style.left =(document.getElementById(\"ctlCenter\").clientWidth-document.getElementById(\"pre\").width)/2+o.scrollLeft*prep+\"px\";}
function mvStop()
{
if(tc) clearInterval(tc);
}
</script>
<script type=\"text/javascript\">
function preImgInit(){
var imgx=document.getElementById(\"pre\").width;
var imgy=document.getElementById(\"pre\").height;
if(imgx==imgy)
{
document.getElementById(\"pre\").style.width=\"100%\";
document.getElementById(\"pre\").style.height=\"100%\";
prep=document.getElementById(\"pre\").clientHeight/imgy;
imgp=document.getElementById(\"imgShow\").clientHeight/imgy;
document.getElementById(\"dragDiv\").style.width=imgp*document.getElementById(\"pre\").clientHeight+\"px\";
document.getElementById(\"dragDiv\").style.height=imgp*document.getElementById(\"pre\").clientHeight+\"px\";
document.getElementById(\"dragDiv\").style.left=\"0px\";
document.getElementById(\"dragDiv\").style.top=\"0px\";
}
else if(imgx>imgy)
{
document.getElementById(\"pre\").style.width=\"100%\";
document.getElementById(\"pre\").style.height=imgy/imgx*100+\"%\";
prep=document.getElementById(\"pre\").clientWidth/imgx;
imgp=document.getElementById(\"imgShow\").clientWidth/imgx;
document.getElementById(\"dragDiv\").style.width=imgp*document.getElementById(\"pre\").clientWidth+\"px\";
document.getElementById(\"dragDiv\").style.height=imgp*document.getElementById(\"pre\").clientWidth+\"px\";
document.getElementById(\"dragDiv\").style.left=\"0px\";
document.getElementById(\"dragDiv\").style.top=(document.getElementById(\"ctlCenter\").clientHeight-document.getElementById(\"pre\").height)/2+\"px\";
document.getElementById(\"pre\").style.top=(document.getElementById(\"ctlCenter\").clientHeight-document.getElementById(\"pre\").height)/2+\"px\";
}
else
{
document.getElementById(\"pre\").style.height=\"100%\";
document.getElementById(\"pre\").style.width=imgx/imgy*100+\"%\";
prep=document.getElementById(\"pre\").clientHeight/imgy;
imgp=document.getElementById(\"imgShow\").clientHeight/imgy;
document.getElementById(\"dragDiv\").style.width=imgp*document.getElementById(\"pre\").clientHeight+\"px\";
document.getElementById(\"dragDiv\").style.height=imgp*document.getElementById(\"pre\").clientHeight+\"px\";
document.getElementById(\"dragDiv\").style.top=\"0px\";
document.getElementById(\"dragDiv\").style.left=(document.getElementById(\"pre\").offsetLeft-1)+\"px\";
}
}
document.body.onselectstart=function(){return false};
preImgInit();
var o=document.getElementById(\"imgShow\");
function img_zoom(e, o)
{
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0) o.style.zoom = zoom + '%';
return false;
}
</script>
</body>
</html>

第 8 楼

得分:0

仿雅虎的下拉效果_显示层效果_一个详细注解，学习的好例子


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>仿Yahoo隐藏、显示层效果_一个详细注解，学习的好例子</title>
<style type=\"text/css\">
<!--
body{
    background: #FFF;
    color: #000;
    font: normal 12px 宋体,arial,sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
}
div,form,ul,ol,li,span,p {
    border: 0;
    margin: 0;
    padding: 0;
}
/*清除float*/
.clear{
    clear: both;
    font-size: 1px;
    visibility: hidden;
}
/*分类标题*/
.class_title{
    margin: 0 auto;
    width: 504px;
    height: 17px;
    border: 1px solid #9EB1C0;
    padding: 1px;
    background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}
.class_title h2{
    margin: 0;
    padding: 2px 0 2px 18px;
    height: 12px;
    color: #16387C;
    font: bold 13px 宋体,arial,sans-serif;
    cursor:pointer;
    letter-spacing: 2px;
    text-align: left;
}
#tabclass1{
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
}
/*分类列表（模块一）*/
#class_cnt1{
    background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
    border: solid #9EB1C0;
    border-width: 0 1px 1px 1px;
    height: 287px;
    margin: 0 auto;
    text-align: left;
    width: 506px;
    display: block;
  overflow:hidden;
}
#class_cnt1 p{
   margin:0;
   padding:3px;
   line-height:150%;
}
-->
</style>
<script language=\"javascript\" type=\"text/javascript\">
<!--
//=======================================================
//函数名称：getObject(objectId)
//          参数objectId:控件的ID值
//函数功能：获得控件的ID值
//返 回 值：ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
}
// 显示列表框
function displayList(){    
          var h = getObject('class_cnt1').offsetHeight;  // 内容容器class_cnt1的初始高度（这时高度为：0）
          var max_h = 287; // 容器的最大高度
          
          var anim = function(){            
                    h += 10; // 每次递增50像素
                    //如果增加的高度开始超过容的最大高度
                    if(h >= max_h){ 
                    getObject('class_cnt1').style.height = \"287px\"; // 工期高度为287px(因为我们只希望容器这么高)
                    getObject('tabclass1').style.backgroundImage=\"url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)\"; // 让图片标签改变背景           
                    if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
                    }
                    else{ // 如果增加中的容器高度没有超过287px
                getObject('class_cnt1').style.display=\"block\"; // 让容器可见（这样我们才能够看到容器在增高的效果）
                getObject('class_cnt1').style.height = h + \"px\"; // 容器高度不断的以50px递增
                    }
            }
               
              var tt = window.setInterval(anim,2);  // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）    
}
// 隐藏列表框
function hiddenList(){
       var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
           var anim = function(){
                 h -= 10; // 每次递减50像素
                 
                 if(h <= 5){
                 getObject('class_cnt1').style.display=\"none\"; // 内容容器不可见（当容器高度小于5px）
                   getObject('tabclass1').style.backgroundImage=\"url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)\"; 
                   if(tt){window.clearInterval(tt);}
               }
               else{
                   getObject('class_cnt1').style.height = h + \"px\"; // // 容器高度不断的以50px递减 
               }
           }
             
           var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}
//=======================================================
//函数名称：showClassList()
//函数功能：隐藏-显示级分类列表框（class_cnt1）
//返 回 值：无
//=======================================================
function showClassList(){
   // 如果内容容器为不可见的display:none
   if(getObject('class_cnt1').style.display == \"none\"){ 
       displayList(); // 显示内容框
   }
   else{ // 如果内容容器为可见的display:block
         hiddenList(); // 隐藏内容框
     }
}
-->
</script>
</head>
<body>
    <div class=\"class_title\">
         <h2 id=\"tabclass1\" onclick=\"showClassList()\" title=\"隐藏/显示信息\">分类信息</h2>         
    </div>         
    <div id=\"class_cnt1\">
    <p>
    1111111<br />
    111111111<br />
    1111111<br />
    111111111<br />
    1111111<br />
    111111111<br />
    1111111<br />
    111111111<br />
    1111111<br />
    111111111<br />
    1111111<br />
    111111111<br />
    111111111<br />
    </p>
    </div>
</body>
</html>

--------------------------------------------------------------------------------

仿淘宝网站的导航效果--一个学习的很好例子(选项卡效果)


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>仿淘宝网站的导航效果--一个学习的很好例子(选项卡效果)</title>
<style type=\"text/css\">
<!--
* {
    margin: 0; padding:0
}
body {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    text-align: center;
    height: auto;
    width: auto;
    background-color: #666666;
    font-size: 12px;
    color: #000000;
}
#container {
    text-align: left;
    width: 760px;
    height: 400px;
    background-color: #FFFFFF;
    padding: 20px;
}
#container #title {
    height: 28px;
}
#container #title li {
    float: left;
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 1px;
}
#container #title ul {
    background-color: #FFFFFF;
    height: 28px;
}
#container #title a {
    text-decoration: none;
    color: #000000;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -29px;
    padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right 0px;
    padding: 0 15px 0 15px;    
}
#container #title #tag3 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -58px;
    padding: 0 15px 0 15px;    
}
#container #title #tag4 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
    display: block; 
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title .selectli1 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
    display: block;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -87px; 
    padding: 0 15px 0 15px;
}
#container #title .selectli2 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
    display: block; 
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right 0px; 
    padding: 0 15px 0 15px;
}
#container #title .selectli3 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
    display: block; 
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -58px; 
    padding: 0 15px 0 15px;
}
#container #title .selectli4 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
    display: block; 
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -145px; 
    padding: 0 15px 0 15px;
}
#container #title .selectli5 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
    display: block; 
    background: url(http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif) no-repeat right -174px; 
    padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
    height: 300px;
    padding: 10px;
}
.content1 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #3A81C8;
    border-right-color: #3A81C8;
    border-bottom-color: #3A81C8;
    border-left-color: #3A81C8;
    background-color: #DFEBF7;
}
.content2 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ff950b;
    border-right-color: #ff950b;
    border-bottom-color: #ff950b;
    border-left-color: #ff950b;
    background-color: #FFECD2;
}
.content3 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FE74B8;
    border-right-color: #FE74B8;
    border-bottom-color: #FE74B8;
    border-left-color: #FE74B8;
    background-color: #FFECF5;
}
.content4 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00988B;
    border-right-color: #00988B;
    border-bottom-color: #00988B;
    border-left-color: #00988B;
    background-color: #E8FFFD;
}
.content5 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #A8BC1F;
    border-right-color: #A8BC1F;
    border-bottom-color: #A8BC1F;
    border-left-color: #A8BC1F;
    background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language=\"javascript\">
function switchTag(tag,content)
{
//    alert(tag);
//    alert(content);
    for(i=1; i <6; i++)
    {
        if (\"tag\"+i==tag)
        {
            document.getElementById(tag).getElementsByTagName(\"a\")[0].className=\"selectli\"+i;
            document.getElementById(tag).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"selectspan\"+i;
        }else{
            document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].className=\"\";
            document.getElementById(\"tag\"+i).getElementsByTagName(\"a\")[0].getElementsByTagName(\"span\")[0].className=\"\";
        }
        if (\"content\"+i==content)
        {
            document.getElementById(content).className=\"\";
        }else{
            document.getElementById(\"content\"+i).className=\"hidecontent\";
        }
        document.getElementById(\"content\").className=content;
    }
}
</script>
</head>
<body>
<div id=\"container\">
  <div id=\"title\">
    <ul>
      <li id=\"tag1\"><a href=\"#\" onclick=\"switchTag('tag1','content1');this.blur();\" class=\"selectli1\"><span class=\"selectspan1\">首页</span></a></li>
      <li id=\"tag2\"><a href=\"#\" onclick=\"switchTag('tag2','content2');this.blur();\"><span>下载中心</span></a></li>
      <li id=\"tag3\"><a href=\"#\" onclick=\"switchTag('tag3','content3');this.blur();\"><span>产品介绍</span></a></li>
      <li id=\"tag4\"><a href=\"#\" onclick=\"switchTag('tag4','content4');this.blur();\"><span>会员注册与登录</span></a></li>
      <li id=\"tag5\"><a href=\"#\" onclick=\"switchTag('tag5','content5');this.blur();\"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id=\"content\" class=\"content1\">
  <div id=\"content1\"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>    
  <div id=\"content2\" class=\"hidecontent\">2、不同的项目使用不同的颜色来区分</div>
  <div id=\"content3\" class=\"hidecontent\">3、这回需要使用到js了，呵呵</div>
  <div id=\"content4\" class=\"hidecontent\">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id=\"content5\" class=\"hidecontent\">5、这是使用到的两个图片：
         <table width=\"58%\" border=\"1\" cellspacing=\"2\" cellpadding=\"0\">
           <tr>
             <td width=\"70%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_left_bk2.gif\" width=\"250\" height=\"290\" /></td>
             <td width=\"30%\" align=\"center\"><img src=\"http://www.soojs.com/folder/导航菜单/仿淘宝网站的导航效果/tab_selected_right_bk2.gif\" width=\"15\" height=\"290\" /></td>
           </tr>
         </table>
  </div>
</div>  
</div>
</body>
</html>

用滚动条来放大缩小图片


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>无标题文档</title>
<style type=\"text/css\">
<!--
html,body{font-size:12px;width:100%;height:100%;margin:0;padding:0;}
.img{margin:6px 0;}
.resizebutton{background-color:#FFF;border:1px solid #000;padding:4px;cursor:pointer;cursor:hand;position:absolute;display:none;}
.scrollX{position:absolute;background-color:#FFF;border:1px outset #ffffff;filter:Alpha(Opacity=80);opacity:0.8;-moz-user-select:none;}
.scrollX div{width:227px;height:15px;background:url(http://www.blueshut.com/cj/scroll_bg.gif) no-repeat;margin:8px 6px;-moz-user-select:none;}
.scrollX div p{cursor:pointer;cursor:hand;position:static;margin-left:5px;width:17px;height:11px;background:url(http://www.blueshut.com/cj/scroll_but.gif) no-repeat;-moz-user-select:none;}
-->
</style>
<script language=\"javascript\" type=\"text/javascript\">
//----------------------------------------------------------------------------------------------
//    功能说明：用于放大图片的滚动条，可放大至图片的原始大小。在ie6,ie7,ff1.5下可用
//    使用方法：在图片代码里加上resizeable=1，同时在onload事件里加上createResizeScroll函数
//    code by: blues[2007-7-17]
//----------------------------------------------------------------------------------------------
//始初化变量
var oScroll=null,sScrollState=null,iScrollPos=0,iBrowser;
//------------------------------------------------------------------------------------------------
//页面初始化函数
//------------------------------------------------------------------------------------------------
function winInit(){
    //检测浏览器类型
    var __Agt = navigator.userAgent.toLowerCase();
    var __If = /(firefox|netscape|opera).?[\/| ](.)\.([^;\)]+|[^\)]+\))$/.exec(__Agt);
    if(!__If) __If = /(msie) (.)\.[^;]+;/.exec(__Agt);
    var _Br=__If[1], _Ver=__If[2];
    __Agt=null,__If=null;
    if(_Br==\"msie\"){iBrowser=0;}
    else if(_Br==\"firefox\"){iBrowser=1;}
    else{iBrowser=2;}
}
//------------------------------------------------------------------------------------------------
//加上滚动条
//------------------------------------------------------------------------------------------------
function createResizeScroll(){
    var objs=getByTag(\"IMG\");
    var i,endi=objs.length;
    var oFunc;
    for(i=0;i<endi;i++){
        if(objs[i].getAttribute(\"resizeable\")==\"1\"){
            var oFuncBox=document.createElement(\"DIV\");//滚动条框
            var oFuncLine=document.createElement(\"DIV\");//滚动条背景
            var oFuncBut=document.createElement(\"P\");//滚动条本体
            oFuncBut.style.marginLeft=\"5px\";
            oFuncBut._forobj=objs[i];
            oFuncBut.onmousedown=readyMoveScrollBut;
            oFuncBut.onmouseup=doneMoveScrollBut;
            oFuncBox.className=\"scrollX\";
            oFuncBox.style.display=\"none\";
            oFuncBox.onmouseover=function(){this.style.display='block';};
            oFuncBox.onmouseout=function(){this.style.display='none';};
            oFuncBox.onselectstart=oFuncLine.onselectstart=oFuncBut.onselectstart=function(){return false;};//防止被选中
            oFuncBox._type=oFuncLine._type=oFuncBut._type=\"ScrollX\";//给滚动条框加上标志，鼠标移出滚动条框后就要中止
            oFuncLine.appendChild(oFuncBut);
            oFuncBox.appendChild(oFuncLine);
            objs[i].parentNode.insertBefore(oFuncBox,objs[i]);
            objs[i]._width=objs[i].width;
            objs[i]._height=objs[i].height;
            objs[i].onmouseover=function(){this.parentNode.childNodes[0].style.display=\"block\";};
            objs[i].onmouseout=function(){this.parentNode.childNodes[0].style.display=\"none\";};
        }
    }
}
//------------------------------------------------------------------------------------------------
//准备移动
//------------------------------------------------------------------------------------------------
function readyMoveScrollBut(e){
    oScroll=this;
    sScrollState=\"move\";
    iScrollPos=getPostion(\"x\",e);//获取鼠标坐标并保存
    this._left=parseInt(this.style.marginLeft);
    var img=this._forobj;
    var oImg=new Image;
    oImg.src=img.src;
    //滚动条的移动范围是200像素
    //这里计算出宽高的换算比例并保存
    img._wbl=(oImg.width-img._width)/200;
    img._hbl=(oImg.height-img._height)/200;
}
//------------------------------------------------------------------------------------------------
//完成并清除全局变量
//------------------------------------------------------------------------------------------------
function doneMoveScrollBut(e){
    oScroll=null;
    sScrollState=null;
    iScrollPos=0;
}
//------------------------------------------------------------------------------------------------
//鼠标移动
//------------------------------------------------------------------------------------------------
function moveScrollBut(e){
    //获取事件源
    var oEvent=getEvent(e);
    if(oScroll!=null && sScrollState==\"move\"){
        if(oEvent._type==\"ScrollX\"){//只有在指定的范围内触发移动
            var n_x=getPostion(\"x\",e);
            n_x-=iScrollPos;
            n_x+=oScroll._left;
            if(n_x<5)n_x=5;
            if(n_x>205)n_x=205;
            oScroll.style.marginLeft=n_x+\"px\";
            //经过计算得出滚动条的marginLeft值（margin-left的取值范围为[5~205]px）
            n_x-=5;
            //将滚动条的位置值换算成宽高值（之前已经计算得到了宽高的换算比例），赋给图片
            var img=oScroll._forobj;
            img.width=n_x*img._wbl+img._width;
            img.height=n_x*img._hbl+img._height;
        }else{doneMoveScrollBut();}
    }
}
//------------------------------------------------------------------------------------------------
//给对象的指定事件加上函数功能
//------------------------------------------------------------------------------------------------
function AttachEvent(object,eventName,func,cancelBubble){
    var cb=cancelBubble?true:false;
    eventName=eventName.toLowerCase();
    if(document.attachEvent){object.attachEvent(eventName,func);}
    else{object.addEventListener(eventName.substr(2),func,cb);}
}   
//------------------------------------------------------------------------------------------------
//简写函数
//------------------------------------------------------------------------------------------------
function getById(str){return document.getElementById(str);}
function getByName(str){return document.getElementsByName(str);}
function getByTag(str){return document.getElementsByTagName(str);}
//------------------------------------------------------------------------------------------------
//获取鼠标坐标
//------------------------------------------------------------------------------------------------
function getPostion(XorY,e){
    if(iBrowser==0){
        if(XorY==\"x\"){return event.x;}
        else if(XorY==\"y\"){return event.y;}
        else{return false;}
    }
    else{
        if(XorY==\"x\"){return e.pageX;}
        else if(XorY==\"y\"){return e.pageY;}
        else{return false;}
    }
}
//------------------------------------------------------------------------------------------------
//获取事件对象
//------------------------------------------------------------------------------------------------
function getEvent(e){
    if(iBrowser==0){return event.srcElement;}
    else{return e.target;}
}
//------------------------------------------------------------------------------------------------
//加入事件监听
//------------------------------------------------------------------------------------------------
AttachEvent(window,\"onload\",winInit,false);
AttachEvent(window,\"onload\",createResizeScroll,false);
AttachEvent(document,\"onmousemove\",moveScrollBut,false);
AttachEvent(document,\"onmouseup\",doneMoveScrollBut,false);
</script>
</head>
<body>
<div style=\"margin:10px 0 0 40px;padding:10px 0;\">
    <div class=\"img\"><img src=\"http://www.blueshut.com/cj/Bluehills.jpg\" height=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
    <div class=\"img\"><img src=\"http://www.blueshut.com/cj/Sunset.jpg\" width=\"300\" resizeable=\"1\" galleryimg=\"no\" /></div>
    <div class=\"img\"><img src=\"http://www.blueshut.com/cj/Waterlilies.jpg\" width=\"200\" resizeable=\"1\" galleryimg=\"no\" /></div>
    <div class=\"img\"><img src=\"http://www.blueshut.com/cj/Winter.jpg\" width=\"100\" resizeable=\"1\" galleryimg=\"no\" /></div>
</div>
</body>
</html>

参考地址：www.soojs.com/index

超多JS效果：/index" target="_blank">http://www./index 每天更新.QQ群：22035666 一般人我不告诉他

很漂亮的3D文字效果

[code]

<title>很漂亮的3D文字效果</title><xml:namespace ns=\"urn:schemas-microsoft-com:vml\" prefix=\"v\"/>
<style type=\"text/css\">
v\:* { behavior: url(#default#VML); }
</style>
<BODY BGCOLOR=\"#FFFFFF\" TEXT=\"#000000\">
<script type=\"text/javascript\">
// Add as many messages as you like
var message=new Array(\"www.soojs.com\", \"HX66 Desgian\", \"javascript XINCHUANG\", \"3d super cool\")

// Set the outline-color. Add as many colors as you like
var outlinecolor=new Array(\"black\", \"black\")

// Set fillcolors 1. Add as many colors as you like
var fillcolor1=new Array(\"gray\", \"green\", \"white\", \"green\")

// Set fillcolors 2. Add as many colors as you like
var fillcolor2=new Array(\"blue\", \"olive\", \"black\", \"lime\")

// Set the letter marking the circle
var circlemark=new Array(\"-\")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity=\"60%\"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview=\"yes\"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!=\"BackCompat\")? document.documentElement : document.body //Dynamicdrive added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=5000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

var emptyspace=\"\"
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+\" \"+message[i]+\" \"+emptyspace
}

function changeform() {
if (keepinview==\"yes\") //DD added
document.getElementById(\"roofid\").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {document.getElementById('textpathid').string=\"\"
document.getElementById(\"roofid\").style.display=\"none\" //DD added
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=\"\"
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout(\"tick()\",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout(\"changeform()\",pause)
}

}

if (ie) {
document.write('<div id=\"roofid\" style=\"position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;\">')
document.write('<v:oval id=\"tc\" style=\"position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px\">')
document.write('<v:shadow on=\"t\" opacity=\"'+strengthopacity+'\"/>')
document.write('<v:stroke id=\"strokeid\" weight=\"'+strkweight+'pt\" color=\"blue\"/>')
document.write('<v:fill id=\"fillid\" on=\"True\" color=\"'+fillcolor1[0]+'\" color2=\"'+fillcolor2[0]+'\" opacity=\"'+strengthopacity+'\" opacity2=\"'+strengthopacity+'\" type=\"gradient\"/>')
document.write('<v:path textpathok=\"t\"/>')
document.write('<v:textpath id=\"textpathid\" on=\"t\" id=\"mytp\" style=\"font-family:\'Arial Black\'; \" fitpath=\"t\" string=\"\"/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent(\"onload\", changeform) //DD added code
else
window.onload=changeform
}
</script>