利用图片自定义DIV层滚动条

作者：佳明妈来源：懒人建站 2009-12-11 人气：

利用图片自定义DIV层滚动条，替换其中的图片即可实现你自己的DIY。代码所需图片点击下载 http://www.51xuediannao.com/uploads/soft/texiao/divgundong/divgundong.rar

<!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>
<title>利用图片自定义DIV层滚动条_懒人建站</title>
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS导航菜单,FLASH焦点图,网页特效" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
		overflow: hidden;
	}
body {
		margin: 0px;
		padding: 0px;
		background: #222;
		position: absolute;
		width: 100%;
		height: 100%;
		pointer: default;
	}
#screen {
		position: absolute;
		left: 20%;
		height: 40%;
		top: 10%;
		width: 60%;
		overflow: auto;
		background: #000;
		color: #fff;
	}
#screen2 {
		position: absolute;
		left: 20%;
		height: 30%;
		width: 60%;
		top: 60%;
		overflow: auto;
		background: #111;
		color: #fff;
	}
.content {
		position:relative;
		font-size: 0.8em;
		font-family: verdana;
		color: #fff;
		padding: 1em;
		height: 100%;
	}
a {
		text-decoration: none;
		color:#ff8000;
	}
a:hover	{
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
a:visited {
		text-decoration: none;
		color:#ff8000;
	}
a:visited:hover {
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
.cds_scrollbar {
		position: absolute;
		background: #555 url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476505130.gif);
		right: 0px;
		cursor: pointer;
	}
.cds_scrollbar_over {
		background: #aaa url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476497481.gif);
	}
.cds_scrollbar_pushed {
		background: #fff url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476497480.gif);
	}
.cds_track {
		position: absolute;
		background: #222 url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476497482.gif);
		right: -1px;
		top: 0px;
		height: 100%;
		cursor: pointer;
	}
.cds_up {
		position: absolute;
		background: #f60 url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476497483.gif);
		right: 0px;
		top: 0px;
		cursor: pointer;
	}
.cds_down {
		position: absolute;
		background: #f60 url(http://www.51xuediannao.com/uploads/soft/texiao/divgundong/12476497483.gif);
		right: 0px;
		bottom: 0px;
		cursor: pointer;
	}
</style>

onload = function() {
	/* init scrollbars */
	cds.add('screen');
	cds.add('screen2');
}

</script>
</head>
<body>

<div id="screen">
<div class="content">
<h2>Skinned HTML Scrollbar</h2>
<div class="left">
<dl class="hdo list_dl">
<dt class="line_t"><b>CSS导航菜单</b><a href="http://www.51xuediannao.com/JS/nav/" class="more">更多 >></a></dt>
<dd class="line_b">
<ul>
<li><a href="http://www.51xuediannao.com/JS/nav/20091209/254.html"  title="竖向折叠二级导航JS代码（可防刷新ul/li结构）">竖向折叠二级导航JS代码（可防刷新ul/li结构）</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091209/navcss03.html"  title="纯div+css的竖向三级导航菜单代码">纯div+css的竖向三级导航菜单代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091209/cssnav02.html"  title="">纯div+css的紫色三级导航菜单代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091209/cssnav01.html"  title="纯div+css的黄色二级导航菜单代码">纯div+css的黄色二级导航菜单代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091208/jsflashnav.html"  title="JS仿Flash向上翻动效果竖向导航代码">JS仿Flash向上翻动效果竖向导航代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091208/flashnav02.html"  title="粉红色flash导航带fla源文件">粉红色flash导航带fla源文件</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091208/flashnav.html"  title="XML配置的flash图片导航带fla源文件">XML配置的flash图片导航带fla源文件</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091207/jquery4nav.html"  title="Jquery四种苹果风格导航菜单(横向/竖向/向上/向下)">Jquery四种苹果风格导航菜单(横向/竖向/向上/向下</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091205/Jquerynav.html"  title="">Jquery二级导航菜单可弹出下拉层 UL/LI结构</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091202/jquery huadong.html"  title="jquery动感滑动蓝色导航菜单(类似flash效果)">jquery动感滑动蓝色导航菜单(类似flash效果)</a></li>

</ul>
</dd>
</dl><dl class="hdo list_dl">
<dt class="line_t"><b>FLASH焦点图</b><a href="http://www.51xuediannao.com/JS/Slide/" class="more">更多 >></a></dt>
<dd class="line_b">
<ul>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091209/xmlswf01.html"  title="XML+Flash顶部Banner幻灯焦点图">XML+Flash顶部Banner幻灯焦点图</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091209/JQuerychajian.html"  title="JQuery图片平滑滚动插件easyslider1.5">JQuery图片平滑滚动插件easyslider1.5</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091208/sanweibanner.html"  title="三维旋转效果幻灯banner焦点图点击滚动">三维旋转效果幻灯banner焦点图点击滚动</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091201/sanweiliti.html"  title="三维立体flash焦点幻灯片(Flash+XML)">三维立体flash焦点幻灯片(Flash+XML)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091128/zuoyouqiehuan.html"  title="横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)">横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091126/gmjiaodiantu.html"  title="国美电器商城首页焦点幻灯片(HTML+CSS+JS)">国美电器商城首页焦点幻灯片(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091125/wlbanner.html"  title="Flash+xml的未来广告公司焦点幻灯banner">Flash+xml的未来广告公司焦点幻灯banner</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091105/Windows banner.html"  title="微软中国MSN主页焦点幻灯片banner">微软中国MSN主页焦点幻灯片banner</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091103/yahoo.html"  title="中国雅虎新首页焦点幻灯片JS+CSS+HTML">中国雅虎新首页焦点幻灯片JS+CSS+HTML</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091027/148.html"  title="点击左右滚动按钮控制有图片和文字">点击左右滚动按钮控制有图片和文字</a></li>

</ul>
</dd>
</dl><dl class="hdo list_dl">
<dt class="line_t"><b>网页特效JS</b><a href="http://www.51xuediannao.com/JS/texiao/" class="more">更多 >></a></dt>
<dd class="line_b">
<ul>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091208/list02.html"  title="JS实现鼠标拖拽翻页效果文章列表(div+ul+li)">JS实现鼠标拖拽翻页效果文章列表(div+ul+li)</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091208/Ajax tab.html"  title="Ajax的Tab导航滑动门，点击切换(DIV/UL/LI结构)">Ajax的Tab导航滑动门，点击切换(DIV/UL/LI结构)</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091208/jssuiji.html"  title="JS生成随机数并按照数字大小排序">Javascript随机数并按照数字大小排序</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091207/tanchudenglu.html"  title="点击登录按钮弹出登录层(HTML+CSS+JS)">Jquery点击登录按钮弹出登录层</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091202/zhediezuolan.html"  title="DIV结构的点击收缩展开左边栏代码(html+css+js)">DIV结构的点击收缩展开左边栏代码(html+css+js)</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091202/zhedie001.html"  title="JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)">JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091125/"  title="HTML+CSS代码极少的滑动门选项卡">HTML+CSS代码极少的滑动门选项卡</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091123/tzdb2.html"  title="JS跳转到页面顶部带QQ客服">JS跳转到页面顶部带QQ客服</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091122/shoucangdao2.html"  title="“收藏到”代码大全二">“收藏到”代码大全二</a></li>
<li><a href="http://www.51xuediannao.com/JS/texiao/20091122/shoucangdao.html"  title="“收藏到”代码全收集">“收藏到”代码全收集</a></li>

</ul>
</dd>
</dl><dl class="hdo list_dl">
<dt class="line_t"><b>JS广告代码</b><a href="http://www.51xuediannao.com/JS/AD/" class="more">更多 >></a></dt>
<dd class="line_b">
<ul>
<li><a href="http://www.51xuediannao.com/JS/AD/20091205/baidufudong.html"  title="百度推广右下角提交留言的浮动层JS代码">百度推广右下角提交留言的浮动层JS代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091205/youxiatv.html"  title="JS右下角浮动视频广告代码可关闭可最小化">JS右下角浮动视频广告代码可关闭可最小化</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091205/sinayouxia.html"  title="类似新浪博客右下角弹出广告代码可最小化可关闭">类似新浪博客右下角弹出广告代码可最小化可关</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091202/youxiajiao002.html"  title="右下角弹出浮动层广告代码可自动关闭">右下角弹出浮动层广告代码可自动关闭</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091201/tanchuswf.html"  title="能播放flash文件的弹出浮动窗口广告代码(有重播按钮)">能播放flash文件的弹出浮动窗口广告代码(有重播</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091201/yxtc2.html"  title="类似阿里妈妈右下角弹出浮动广告代码可关闭可最小化(HTML+CSS+JS)">类似阿里妈妈右下角弹出广告代码可关闭可最小</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091201/yxtc1.html"  title="右下角弹出浮动广告代码可关闭可最小化(HTML+CSS+JS)">右下角弹出浮动广告代码可关闭可最小化(HTML+C</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091111/gonggao.html"  title="JS+DIV+CSS实现以打字效果逐条显示的公告栏">JS+DIV+CSS实现以打字效果逐条显示的公告栏</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091108/suijiadjs.html"  title="JS随机广告代码">JS随机广告代码</a></li>
<li><a href="http://www.51xuediannao.com/JS/AD/20091108/dingshiguanggao.html"  title="JS定时间段显示广告">JS定时间段显示广告</a></li>

</ul>
</dd>
</dl>
</div>
</div>
</div>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>

利用图片自定义DIV层滚动条，替换其中的图片即可实现你自己的DIY。

代码所需图片点击下载 http://www.51xuediannao.com/uploads/soft/texiao/divgundong/divgundong.rar

↓ 查看全文

本文链接：利用图片自定义DIV层滚动条https://www.51xuediannao.com/js/texiao/256.html

利用图片自定义DIV层滚动条由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：JS实现鼠标拖拽翻页效果文章列表(div+ul+li)
下一篇：JS表单提示特效代码（dl/dt/dd结构）

利用图片自定义DIV层滚动条

利用图片自定义DIV层滚动条-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

利用图片自定义DIV层滚动条

利用图片自定义DIV层滚动条-相关文章

利用图片自定义DIV层滚动条-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户