<!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=utf-8" />
<title>网聚重构设计</title>
<link href="style/t3.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jscroll.js" ></script>
<div id="container">
<div class="main">
<div class="sidebar">
<div class="box01">
<div class="top">
技術天地 </div>
<div class="mid">
<ul>
<li><a href="http://www.163css.com">华南宠物网</a></li>
<li><a href="http://www.163css.com">中国私募网</a></li>
<li><a href="http://www.163css.com">广州新怡印务有限公司</a></li>
</ul>
</div>
<div class="bot"> </div>
</div>
<div class="box02">
<div class="jmperson">
<div class="grp01">
<a href="http://www.163css.com"><img src="images/c1-img01.gif" /></a> </div>
<div class="grp02">
<h3><a href="http://www.163css.com">广州网页制作</a></h3>
<div class="p">產品遍布全国各地,覆盖多個行業;同時远销海外.產品遍布全国各地,覆盖多個行業;同時远销海外.</div>
</div>
</div>
<div class="jmperson">
<div class="grp01">
<a href="http://www.163css.com"><img src="images/c1-img02.gif" /></a> </div>
<div class="grp02">
<h3><a href="http://www.163css.com">广州网页设计</a></h3>
<div class="p">如果您对我们的产品有疑问,欢迎随时咨询我们服务人员如果您对我们的产品有疑问,欢迎随时咨询我们服务人员</div>
</div>
</div>
</div>
</div>
<div class="maincontent">
<div class="box01">
<span><a href="http://www.163css.com">首页</a> >> 公司简介</span><img src="images/t1-font.gif" /> </div>
<div class="box02">
<h4>网聚重构设计</h4>
<div id="ee">
<a href="http://www.163css.com"><img src="images/img02.jpg" /></a> </div>
<script type="text/javascript">
$(document).ready(function(){
$("#ee").jscroll({
W:"10px"
,BgUrl:"url(images/s_bg2.gif)"
,Bg:"right 0 repeat-y"
,Bar:{Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
,Bg:{Out:"-45px 0 repeat-y",Hover:"-45px 0 repeat-y",Focus:"-45px 0 repeat-y"}}
,Btn:{btn:true
,uBg:{Out:"0 0",Hover:"0px 0",Focus:"0px 0"}
,dBg:{Out:"0 -8px",Hover:"0px -8px",Focus:"0px -8px"}}
,Fn:function(){}
});
});
</script>
</div>
</div>
</div>
</div>
没有合适的资源?快使用搜索试试~ 我知道了~
jQuery实现精美滚动条
共43个文件
gif:30个
jpg:6个
js:2个
4星 · 超过85%的资源 需积分: 12 55 下载量 151 浏览量
2012-11-13
13:57:09
上传
评论 1
收藏 1.01MB RAR 举报
温馨提示
百度里搜了一下,原来已经有高手采用jquery来改变滚动条的单调样式了。 首先要引用两个脚本:jquery.js,jscroll.js; 接着为要出现滚动条的位置写上overflow:auto;这时会出现滚动条,最原始的样子。接着,加上以下脚本: 我的滚动条图片是这样的: 以下我借用高手的做法介绍下一些代码说明: $("#ee").jscroll({ W:"10px"//设置滚动条宽度 ,BgUrl:""//设置滚动条背景图片地址 ,Bg:"#ccc"//设置滚动条背景图片position,颜色等 ,Bar:{ Pos:"bottom"//设置滚动条初始化位置在底部 ,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色:鼠标离开(默认),经过 ,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景:鼠标离开(默认),经过,点击 ,Btn:{ btn:true//是否显示上下按钮 false为不显示 ,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景:鼠标离开(默认),经过,点击 ,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景:鼠标离开(默认),经过,点击 ,Fn:function(){}//滚动时候触发的方法 }); 以是改出来后的样子:
资源推荐
资源详情
资源评论
收起资源包目录
jQuery实现精美滚动条.rar (43个子文件)
滚动条
style
public.css 2KB
t3.css 833B
images
c1-bg01.gif 4KB
p1-font.gif 4KB
c1-bg02.gif 2KB
p2-bg04.gif 210B
header-bg04.gif 4KB
p2-bg01.gif 437B
p1-img01.jpg 18KB
p2-bg03.gif 179B
header-bg02.gif 171B
header-bg01.gif 44KB
flash.jpg 199KB
rollpic-right.gif 610B
c1-bg03.gif 899B
c1-img02.gif 5KB
c1-img01.gif 5KB
p2-img01.jpg 74KB
s_bg5.gif 2KB
img01.gif 13KB
t1-font.gif 4KB
p2-bg02.gif 178B
rollpic-left.gif 615B
s_bg2.gif 169B
block.gif 44B
p2-bg05.gif 277B
logo.jpg 30KB
bg03.gif 21KB
Thumbs.db 420KB
bg01.gif 27KB
footer-bg01.gif 77B
c1-font.gif 3KB
font02.gif 3KB
t1-icon.gif 51B
bg02.gif 4KB
img01.jpg 21KB
header-bg03.gif 44B
c1-bg04.gif 19KB
img02.jpg 311KB
js
jquery.js 29KB
jscroll.js 8KB
Thumbs.db 8KB
t3.html 3KB
共 43 条
- 1
yjxfox
- 粉丝: 5
- 资源: 83
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页