发的内容老是要审核，麻烦。
仿雅虎的下拉效果_显示层效果_一个详细注解，学习的好例子
<!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
程序代码：