jQuery+CSS3实现彩色网页滚动条特效代价

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3实现彩色网页滚动条特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=utf-8" />
    <title>scroll</title>
    <link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
    <div class="main">
        <div class="book">
            <div id="scroll">
                <div id="scroLeft">
                    <ul>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                        <li class="absolute"></li>
                    </ul>
                </div>

                <div id="scroRight">
                    <div id="scroLine"></div>
                </div>
            </div>

            <div class="R_Page">
                <div class="title">Absolute Vodka</div>
                <div class="wheat"></div>
                <div class="sub_title">Made by Premium Wheat</div>

                <ul class="rate">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</body>
</html>

JS代码(common.js):

// JavaScript Document// Download by http://www.veryhuo.com$(function(){
	/*rating*/
$(".rate li").hover(function(){
	$(".select").removeClass("select");
	$(this).prevAll().andSelf().addClass("hover");
}
,function(){
	$(this).prevAll().andSelf().removeClass("hover");
}
);
	$(".rate li").click(function(){
	$(this).prevAll().andSelf().addClass("select");
}
)/*number*/
var num = 0;
	$("li.absolute").each(function(){
	num++;
	var src = "url(images/Absolut_00"+num+".png) center center no-repeat";
	$(this).css({
	"background":src}
);
}
);
}
);
	$(function(){
	var scrolling=false;
	$("scroll").onselectstart=function(e){
	return false}
function $(o){
	return document.getElementById(o)}
//鼠标移入显示滚动条 $("scroll").onmouseover=function show(){
	//计算滚动条相对高度var height = $("scroLeft").scrollHeight/$("scroll").scrollHeight;
	$("scroLine").style.height=$("scroll").clientHeight/height+"px";
	$("scroLine").style.opacity=1;
	//设置可见}
//鼠标移出隐藏滚动条 $("scroll").onmouseout=function hide(){
	$("scroLine").style.opacity=0;
	//设置隐藏}
//鼠标拖动 $("scroLine").onmousedown=function scroMove(){
	scrolling=true;
	document.onmousemove=function(e){
	if(scrolling){
	scroNow(e)}
else{
	return false;
}
}
document.onmouseup=function(e){
	document.onmousemove=null;
	scrolling=false}
return false;
	//非常重要！防止鼠标粘连，特别是火狐下}
//鼠标点击 function scroNow(event){
	var event=event?event:(window.event?window.event:null);
	var Y=event.clientY-$("scroll").getBoundingClientRect().top-$("scroLine").clientHeight/2;
	var H=$("scroll").clientHeight-$("scroLine").clientHeight;
	var SH=Y/H*($("scroLeft").scrollHeight-$("scroLeft").clientHeight);
	if (Y<0)Y=0;
	if (Y>H)Y=H;
	$("scroLine").style.top=Y+"px";
	$("scroLeft").scrollTop=SH;
}
$("scroRight").onclick= scroNow;
	//鼠标滚轮 $("scroll").onmousewheel=function scrollWheel(){
	var Y=$("scroLeft").scrollTop;
	var H=$("scroLeft").scrollHeight-$("scroLeft").clientHeight;
	if (event.wheelDelta >=120){
	Y=Y-180}
else{
	Y=Y+180}
if(Y<0)Y=0;
	if(Y>H)Y=H;
	$("scroLeft").scrollTop=Y;
	var SH=Y/H*$("scroll").clientHeight-$("scroLine").clientHeight;
	if(SH<0)SH=0;
	$("scroLine").style.top=SH+"px";
}
}
);

CSS代码(style.css):

@charset "utf-8";/* CSS Document Download by http://www.veryhuo.com*/
*{margin:0;padding:0;}
body{background:url(images/light.PNG);}
/* Mozilla based browsers */
::-moz-selection{background-color:none;color:#000;}
/* Works in Safari */
::selection{background-color:none;color:#000;}
.main{position:absolute;width:1007px;height:auto;}
.book{background:url(images/book-bg1.png);width:988px;height:633px;margin:0 auto;}
/*主窗*/
#scroll{width:380px;height:525px;position:absolute;left:90px;top:30px;}
/*左边内容区*/
#scroLeft{float:left;height:100%;width:370px;overflow:hidden;}
/*右边滚动条轨道*/
#scroRight{background:#999;background:rgba(0,0,0,0.1);float:right;height:100%;width:10px;border-radius:10px;overflow:hidden;}
/*滚动条*/
#scroLine{position:absolute;z-index:1;top:0;right:0;width:10px;background:url(images/opacity_70.png);background:rgba(0,0,0,0.8);opacity:0.7;border-radius:10px;cursor:pointer;}
#scroLeft img{margin:30px 60px;cursor:pointer;}
.absolute{display:block;width:370px;height:300px;}
.R_Page{width:380px;height:525px;position:absolute;left:500px;top:30px;padding:20px;}
.title{font:64px 'Bickham Script Pro','Edwardian Script ITC','Palace Script MT',Zapfino,cursive;text-align:center;line-height:70px;color:#333;text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
.sub_title{width:320px;display:block;font:24px Tahoma,Geneva,sans-serif;text-align:center;line-height:24px;color:#333;margin:10px auto;text-shadow:1px 1px 2px rgba(0,0,0,0.1);}
.wheat{background:url(images/produzione.png);display:block;width:200px;height:300px;margin:0px auto;}
ul.rate{display:block;width:175px;height:35px;margin:20px auto;padding:0;}
.rate li{background:url(images/icon_heart.png);float:left;display:inline;width:35px;height:35px;cursor:pointer;}
li.select{background-position:0 -35px;}
li.hover{background-position:0 -35px;}

附件:下载该文件资源,减少时间成本(增值服务)