文章分类 Classification
jquery透明滚动条
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2011-10-20 阅读次数: 680 查看权限: 游客查看
div自定义浮动透明滚动条。原来是用图片做下拉滚动条，我改成全代码透明。代码仍觉得不理想，也觉得很少案例需要这种效果，只是工作需要才制作此功能。
些代码比较长，有等改进与优化。
<!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>透明滚动条</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="images/jquery-1.6.4.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
Scroll("#s_content", "#find_list", "#s_side", "#s_bar");
});
//透明滚动条
function Scroll(sdiv, cdiv, side, sbar) {
var h = $(sdiv).height();//外框DIV高
var ih = $(cdiv).height();//总需要滚动内容的高度
var mh = parseInt(h * h / ih);
var h1 = parseInt($(side).height()) - mh; //图片与div的高度差值
var h2 = parseInt(ih - h); //内容与边框div的高度差值
$(sbar).height(mh);
$(sbar).find(".c_bar").height(mh);
if (ih > h + 10) {
$(side).show();
$(sdiv).hover(function () {
var oDiv = document.getElementById(side.replace("#", ""));
var oDiv2 = document.getElementById(sbar.replace("#", ""));
var i_differ = $(oDiv).height() - $(oDiv2).height();
var mouseStart = {};
var divStart = {};
var rightStart = {};
var bottomStart = {};
$(oDiv2).mousedown(function (ev) {
var oEvent = ev || event;
mouseStart.x = oEvent.clientX;
mouseStart.y = oEvent.clientY;
divStart.x = parseInt($(oDiv2).css("left"));
divStart.y = parseInt($(oDiv2).css("top"));
if (oDiv2.setCapture) {
oDiv2.setCapture();
oDiv2.onmousemove = doDrag3;
oDiv2.onmouseup = stopDrag3;
} else {
$(oDiv).bind("mousemove", doDrag3).bind("mouseup", stopDrag3);
}
oEvent.preventDefault();
});
function doDrag3(ev) {
var oEvent = ev || event;
var t = oEvent.clientY - mouseStart.y + divStart.y;
if (t < 0) {
t = 0;
} else if (t >= i_differ) {
t = i_differ;
}
$(oDiv2).css("top", t + "px");
$(cdiv).css("top", -(t * h2 / h1) + "px");
}
function stopDrag3() {
if (oDiv2.releaseCapture) {
oDiv2.releaseCapture();
oDiv2.onmousemove = null;
oDiv2.onmouseup = null;
} else {
$(oDiv).unbind("mousemove", doDrag3).unbind("mouseup", stopDrag3);
}
}
function scrollFunc(e) {
var direct = 0;
e = e || window.event;
if (e.wheelDelta) {
//IE/Opera/Chrome
direct = e.wheelDelta;
} else if (e.detail) {
//Firefox
direct = e.detail;
}
var t = parseInt($(oDiv2).css("top"));
if (direct < 0) {
t += 30;
} else {
t -= 30;
}
if (t < 0) {
t = 0;
} else if (t >= i_differ) {
t = i_differ;
}
$(oDiv2).css("top", t + "px");
$(cdiv).css("top", -(t * h2 / h1) + "px");
}
if (document.addEventListener) {
this.addEventListener('DOMMouseScroll', scrollFunc, false);
}
this.onmousewheel = this.onmousewheel = scrollFunc;
}, function () {
});
} else {
$(side).hide();
}
}
</script>
<style>
#s_content{
width:300px;
height:300px;
overflow:hidden;
border:1px #000 solid;
z-index:1;
position:relative;
}
#find_list{
position:absolute;
width:300px;
text-align:left;
}
.s_side{
z-index:3;
right:10px;
width: 14px;
position: absolute;
top: 0;
height: 300px;
}
.s_bar{
position: absolute;
top:0;
height:10px;
width:11px;
border:1px solid #003399;
border-width:0 1px;
filter: alpha(opacity=60);
opacity: 0.6;
}
.c_bar{
position: absolute;
top:-1px;
height:12px;
width:11px;
cursor:pointer;
border:1px solid #003399;
border-width:1px 0;
background-color:#6699ff;
filter: alpha(opacity=60);
}
</style>
<body>
<div id="s_content">
<div id="s_side" class="s_side">
<div id="s_bar" class="s_bar"><div class="c_bar"></div></div>
</div>
<div id="find_list">
阳光企业网站管理系统V1.0用户手册
<p>=======================================</p>
<p>版权声明：</p>
<p>阳光企业网站管理系统（Sunshine Corporation Site），简称SCSCMS或SCS，其标识及程序，属太阳光工作室版权所有。</p>
<p>本站公开发行的SCSCMS为开源免费程序，你可以任意传播、修改及使用。但不得用于商业用途或者出售转卖，对于因私自用于商业用途而导致的所有损失，本工作室概不负责。</p>
<p>本站对公开发行版提供免费更新及安全维护。</p>
<p>建议到官方网站下载安全版本http://www.scscms.com</p>
<p>======================================</p>
<p>一、基本说明：</p>
<p>本程序适用于中小企业及个人网站建设使用；需要有一定HTML+ASP基本知识；<br>
结构：ASP+ACESS+FSO。</p>
<p>二、功能说明：</p>
<p>栏目设置：[新闻/文章/产品/下载/图片/留言/链接/频道/影音等] <br>
编辑器采用全球最优秀的FCK编辑器,文件采用相对绝对地址；<br>
采用ASP函数标签+DIV布局，可在任意页面自由调用标签，灵活使用，可制作出多采多姿的风格；<br>
全站生成DIV+CSS的HTML静态页面，前台绝大部分交互式代码采用AJAX技术；<br>
界面清秀经典，功能丰富多彩；</p>
<p>【一】、网站配置<br>
1、基本信息：服务器基本信息及网站内容统计信息等；<br>
2、基本设置：设置网站的基本资料，如会员基本设置前台基本设置等；<br>
3、频道管理：新增或者删除频道；<br>
4、菜单管理：网站导航菜单管理；<br>
5、投票管理：投票可设置单选还是多选；<br>
6、公告管理：发布本站的公告或者通知；<br>
7、音乐管理：管理后台音乐，此音乐为后台管理网站时同步娱乐的；<br>
<br>
【二】、站务管理<br>
1、网站日志：各管理员的日志，可以设置是否共享；<br>
2、短信管理：方便管理员会员之间的交流；<br>
3、访问统计：统计本站流量来源，以便了解整站效果；<br>
4、在线I P：访问网站的即时在线人数；<br>
5、留言管理：管理本站来宾留言；<br>
6、修改密码：修改本人的后台登陆密码；<br>
7、查看权限：查看本人现有网站管理的权限；<br>
<br>
【三】、内容管理<br>
1、数据采集：新闻文章采集；<br>
2、生成静态：生成各栏目静态页；<br>
3、分类管理：各栏目的无限级分类管理；<br>
4、新闻管理：添加修改删除及批量操作<br>
5、文章管理：添加修改删除及批量操作<br>
6、产品管理：添加修改删除及批量操作<br>
7、订单管理：查看订单与处理；<br>
8、图片管理：一个图片主题多张图片展示<br>
6、影音管理：添加修改删除及批量操作<br>
7、下载管理：添加修改删除及批量操作<br>
7、评论管理：各栏目的评论集中管理;<br>
<br>
【四】、数据管理<br>
1、数据库sql：针对SQL语句比较熟悉的用户快捷操作数据库；<br>
2、服务器参数探测：查看当前服务器组件情况；<br>
3、SQL注入：记录有关SQL注入情况，IP锁定；<br>
4、上传管理：管理所有上传文件；<br>
5、后台记录：记录所有会员管理员在后台的重要操作<br>
6、数据库：数据库备份、压缩、下载、还原<br>
7、订单管理：查看订单与处理；<br>
8、管理员：添加或者编辑及删除管理员<br>
6、会员管理：添加或者编辑及删除会员<br>
<br>
【五】、程序信息<br>
阳光企业网站管理系统 【Sunshine Corporation Site】 <br>
作者：太阳光 <br>
联系：guangda1234@126.com <br>
网站：WWW.SCSCMS.COM <br>
<br>
三、特色：</p>
<p>超酷美化 ：经典风格，超酷界面，精美窗口设计<br>
无限级菜单分类：新闻文章产品下载影音等无限级分类<br>
SEO优化 ：DIV+CSS生成静态页，访问流量统计<br>
批处理文件 ：删除修改等操作批量处理<br>
AJAX技术 ：无刷新会员登陆，超时自动登陆<br>
数据采集 ：新闻文章内容采集<br>
丰富的互动 ：评论，留言，邮件，短信，顶踩，投票等<br>
安全可靠 ：MD5密码，安全动态密码，操作记录<br>
</p>
<p>四、使用：</p>
<p>数据库设置：数据库链接地址修改在inc/Scs_conn.asp文件中，网站基本参数设置在inc/Scs_config.asp文件中，在后台通过FSO功能进行实时修改，如果你的网站空间不支持FSO，可以手工编辑此文件，然后再重新上传，即可实现设置的更改；<br>
前台没有后台管理连接时，管理员可在IE地址栏直接输入admin/scs_login.asp进行登录，初始帐号/密码：admin/admin；<br>
如果密码不记得请在数据库Scs_admin表中把admin_password列中对应的值换成7a57a5a74a801fc321232f2943894a0e即可修改密码为admin
；</p>
<p>五、客服：</p>
<p>官方网站：http://www.scscms.com/<br>
Q Q 群：25702761<br>
EMAIL：guangda1234@126.com<br>
=======================================<br>
Copyright (C) 2010-2020 太阳光工作室, All Rights Reserved.<br>
Web: http://www.scscms.com/<br>
=======================================</p>
</div>
</div>
</body>
</html>
2012-4-12日修改：增加了鼠标滚轮效果。
关键词: jquery,滚动条 编辑时间: 2012-06-08
0
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
1
无聊
0
反对
0
愤怒
50%(2)
50%(2)
中搜索：jquery透明滚动条
中搜索：jquery透明滚动条
- 暂无评论
文章图片 article Pictrue
网友评论