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)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐