以下是 用层实现的滚动条特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2242">
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为用层实现的滚动条效果，属于站长常用代码" />
<title>用层实现的滚动条效果</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<SCRIPT src="js/window.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/scroll.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/clippings.js" type=text/javascript></SCRIPT>
</head>
<body onLoad="init();">
<script type=text/javascript><!--
// aren't object literals fun?
var jobs = {
list : ["jD15","jD14","jD13","jD11","jResults","jApply","jArchive"],
toggle : function(n) {
for (var i = 0; i < this.list.length; i++) this.list[i] == n ? show(n) : hide(this.list[i])
}
}
// why yes, they are.
function init()
{
//fix for differences in how IE and Netscape setAttribute to the class property
if (document.all) classFix = "className";
else classFix = "class";
//create a screen object, handles height, width of the screen
userScreen = new screenObject();
//in window.js
window.onresize = windowResize;
initClippings();
new ThreeOhScroll('filter');
}
function openExcerpts() {
show('excerpts');
show('div_browse');
hide('div_email');
document.onclick = closeExcerpts
}
function closeExcerpts(e) {
if (!e) e = window.event
var oEl = e.originalTarget ? e.originalTarget : e.srcElement
//cancel if the src element was within the excerpts div
while (oEl != document.body) {
if (oEl.id == "excerpts") return true
oEl = oEl.parentNode ? oEl.parentNode : oEl.parent
}
hide('excerpts')
hide('div_browse')
hide('div_email')
document.onclick = new Function()
}
function toggleExcerpts() {
YY_TogLay('div_browse')
YY_TogLay('div_email')
}
function jobPost() {
hide('jApply');
document.all.jobform.submit();
}
// -->
</script>
<p align="center"></p>
<p align="center"></p>
<p align="center"></p>
<table width="292" height="205" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
<tr>
<td valign="top">
<div id="alltop" style="position:absolute; >
<div class=ThreeOhScroll id=filter
style=;"z-index: 2; width: 284px; position: absolute; height: 190px">
<div class=scrollBar id=ypScrollBar
style="LEFT: 274px; WIDTH: 23px; POSITION: absolute; HEIGHT: 90px; top: 0px;">
<div class=thumbContainer id=ypThumbContainer
style="Z-INDEX: 3; LEFT: 5px; WIDTH: 11px; POSITION: absolute; TOP: 0px; HEIGHT: 185px">
<div class=thumb id=ypThumb
style="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffd200; left: 2px;"><img
class=thumbImg id=ypThumbImg height=50 src="images/thumb.gif"
width=9></div>
</div>
<div class=arrowContainer id=ypArrowContainer
style="Z-INDEX: 4; LEFT: 1px; WIDTH: 5px; POSITION: absolute; TOP: 0px; HEIGHT: 185px">
<div class=arrow id=ypArrow style="POSITION: absolute"><img class=arrowImg
id=ypArrowImg height=7 src="images/arrow.gif" width=4></div>
</div>
<div class=markers id=ypMarkers
style="WIDTH: 15px; POSITION: absolute; HEIGHT: 82px; left: 4px;"></div>
</div>
<div class=description id=ypDescription
style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9px; Z-INDEX: 5; VISIBILITY: hidden; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: geneva, tahoma, arial; POSITION: absolute; BACKGROUND-COLOR: white"></div>
<div class=descArrow id=ypDescArrow
style="Z-INDEX: 6; LEFT: 258px; VISIBILITY: hidden; WIDTH: 4px; CLIP: rect(0px 4px 7px 0px); POSITION: absolute; TOP: 2px; HEIGHT: 7px"><img
height=7 src="images/description.gif" width=4></div>
<div class=container id=ypContainer
style="OVERFLOW: hidden; WIDTH: 284px; CLIP: rect(0px 500px 500px 0px); POSITION: absolute; HEIGHT: 185px; left: 6px; top: 0px;">
<div class=content id=ypContent style="POSITION: absolute; TOP: 2px; left: 6px; width: 275px;">
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<table width="259" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" bgcolor="#CCCC33"><img src="images/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="#" target="_blank">2010/10/10 - 内容</a></span></td>
</tr>
<tr>
<td height="32" style="padding:5px 0 5px 0"> 显而易见，最高的效率就是对现有材料的最佳利用。+ 学会偷懒，并懒出境界是提高工作效率最有效的方法！</td>
</tr>
</table>
<p><!--此处换行符删掉会出错,而且底部有一定高度的空行,这是这个效果的BUG,目前还未解决.-->
</div>
</div>
</div>
</div>
<div id=excerpts style="WIDTH: 324px; HEIGHT: 365px">
<div id=div_browse>
<div id=list>
<div id=clippingsCounter></div>
<div id=clippingsContainer></div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>JS代码(clippings.js):
/*summary- - - - -script handles all clipping functionalitythis is a stripped down version of the IHT clippings codethe primary difference is the removal of animation code which I am not that happy with+ Add to Clippings+ Link to Clipping+ Update Clipping as read+ Remove Clipping(s)+ Save Clippings*/
allClippings = new Array();
//all Clippings on pageactiveClippings = new Array() //all Clippings stored by the usercurrentClipping = 0;
//where in the list of Clippings is the userclippingsDivArray = new Array();
//array of all clipping divs on the page,used to find duplicatescookiesOn = false;
//used to make sure cookies are enabled//this method needs to be called to initialize the clippingsfunction initClippings(){
createPageClippingsArray()loadClippings();
setClippingsVisibility();
updateClippingCounter();
drawClippings();
}
//clipping classfunction Clipping(id,headline,URL,read){
this.id = id;
this.headline = headline;
this.URL = URL;
this.read = read;
this.clicked = markRead;
}
//get Clippings from a cookiefunction loadClippings(){
clippingsString = null;
tempArray = document.cookie.split(";
");
x = -1;
for (tA = 0;
tA < tempArray.length;
tA++){
if (tempArray[tA].indexOf('clippings=') > -1) //found the clippings section{
tPos = tempArray[tA].indexOf("=")+2;
clippingsString = tempArray[tA].substring(tPos,tempArray[tA].length);
//striping out "clippings=^"}
}
if (clippingsString != null){
tempArray = clippingsString.split("^");
if (tempArray.length > 1){
x=0;
for (i=0;
i < tempArray.length/4;
i++){
//add the id,name,url,readstateactiveClippings[i] = new Clipping(tempArray[x],tempArray[x+1],tempArray[x+2],tempArray[x+3])x=x+4;
}
}
}
}
//saves clippings to cookiefunction saveClippings(){
tempCookie = "clippings=";
for(i=0;
i < activeClippings.length;
i++){
tempCookie=tempCookie+"^"+(activeClippings[i].id)+"^"+(activeClippings[i].headline)+"^"+(activeClippings[i].URL)+"^"+(activeClippings[i].read);
}
var expire = new Date ();
expire.setTime (expire.getTime() + (6 * 24 * 3600000));
//expires in 6 days from users clockexpire = expire.toGMTString();
finalCookie = tempCookie+";
path=/;
expires="+expire;
document.cookie = finalCookie;
}
// detects wether cookies are turned on or notfunction eventCheckForCookies(){
document.cookie = "cookies=on";
checkForCookie = document.cookie.split(";
");
for (x=0;
x < checkForCookie.length;
x++){
if (checkForCookie[x].indexOf("cookies") >= 0){
cookiesOn = true;
}
}
if (cookiesOn == false) alert("You will need to enable\ncookies to use Clippings.");
}
//marks a clipping readfunction markRead(id){
if (!id) id = this.id.substring(5,this.id.length);
for (i=0;
i < activeClippings.length;
i++){
if (activeClippings[i].id == id) activeClippings[i].read = "yes";
}
//refresh the containerdrawClippings();
}
//loads the url of the clippingfunction loadClippingURL(pos){
markRead(activeClippings[pos].id);
n = open(activeClippings[pos].URL,"win"+activeClippings[pos].id);
}
//load next unread clipping in arrayfunction eventShowNextClipping(){
if (activeClippings != null){
total = 0;
for (aC = 0;
aC < activeClippings.length;
aC++){
if (activeClippings[aC].read != "yes"){
loadClippingURL(aC);
updateClippingCounter();
saveClippings();
break;
}
}
}
}
//removes all read clippingsfunction eventClearReadClippings(){
tempClippings = new Array()x = 0;
for (i=0;
i < activeClippings.length;
i++){
if (activeClippings[i].read != "yes"){
tempClippings[x] = activeClippings[i];
x++}
}
activeClippings = tempClippings;
drawClippings();
setClippingsVisibility();
updateClippingCounter();
saveClippings();
}
//removes all clippingsfunction eventClearAllClippings(){
activeClippings = new Array();
drawClippings();
setClippingsVisibility();
updateClippingCounter();
saveClippings();
}
//creates the HTML for the clippings menu when a clipping is added//removed create element and used innerHTML insteadfunction drawClippings(){
newHTML = "";
//draw this text if there are no clippignsif (activeClippings.length < 1){
newHTML = "<span class='clippingItem'>There are currently no Excerpts saved.<br>To add an Excerpt click on the <SPAN class='clippingIcon'>+</SPAN> next to a link.<br><br></span>";
//newHTML += "You can access your Excerpts either through this menu,or clicking on the number to the right of the Excerpts menu. That number represents unread Excerpts."}
for (i=0;
i < activeClippings.length;
i++){
clipping = activeClippings[i];
if (clipping.read == "yes") tClass = "clippingItemRead";
else tClass = "clippingItem";
newHTML += "<a href=\"javascript:loadClippingURL("+i+")\" class='"+tClass+"' id='cLink"+clipping.id+"'>";
newHTML += clipping.headline+"</a>";
}
obj = document.getElementById("clippingsContainer");
obj.innerHTML = newHTML;
//make sure that the clippings container does not go off screenclippingsSetContainerHeight();
}
//sets the height of the clippings container,make sure it does not go off screenfunction clippingsSetContainerHeight(){
obj = document.getElementById("clippingsContainer");
obj.style.height= Math.round(userScreen.visHeight()/2)+"px";
}
//make sure there is no other record of that clipping in usefunction checkForDuplicates(){
for (i=0;
i < activeClippings.length;
i++){
if (newClipping == activeClippings[i].id){
i = allClippings.length;
duplicate = true;
}
}
}
//creates array of all clippings on page//having this array helps speed things up on the macfunction createPageClippingsArray(){
d = document.getElementsByTagName("SPAN")for (j=0;
j < d.length;
j++) if (d[j].id.indexOf("clp") > -1){
clippingsDivArray[clippingsDivArray.length] = d[j];
}
}
//finds duplicate clippings on a pagefunction clippingInstanceVisibility(id,state){
t = document.getElementsByName(id);
if(t.length > 0){
for (j=0;
j < t.length;
j++){
t[j].style.visibility = state;
t[j].onclick = addClipping;
}
}
else{
d = clippingsDivArray;
{
for (j=0;
j < d.length;
j++) if (d[j].id == id){
d[j].style.visibility = state;
d[j].onclick = addClipping;
}
}
}
}
//sets the visibility and events for an object;
function setClippingsVisibility(){
for (i=0;
i < allClippings.length;
i++){
vis = "visible";
//find if this clipping is already selectedfor (x=0;
x <activeClippings.length;
x++) if (allClippings[i].id == activeClippings[x].id) vis = "hidden";
obj = "clp"+allClippings[i].id;
clippingInstanceVisibility(obj,vis)}
}
//this event is triggered when a clipping is clickedfunction addClipping(){
newClipping = this.id.substring(3,this.id.length)duplicate = false;
for (i=0;
i < allClippings.length;
i++) //find the position the allClippings array of the selected clipping{
if (newClipping == allClippings[i].id){
pos = i;
i = allClippings.length}
}
if (activeClippings.length > 0)checkForDuplicates() //make sure clipping is not already seletectedif (!duplicate){
eventCheckForCookies();
if (cookiesOn == true){
activeClippings[activeClippings.length] = new Clipping(allClippings[pos].id,allClippings[pos].headline,allClippings[pos].URL);
//find all instances of the clipping in article and hides itclippingInstanceVisibility(this.id,'hidden')drawClippings();
event.cancleBubble = true;
updateClippingCounter();
saveClippings();
}
}
}
//sets the number of unread clippingsfunction updateClippingCounter(){
if (activeClippings != null){
total = 0;
for (aC = 0;
aC < activeClippings.length;
aC++){
if (activeClippings[aC].read != "yes") total++}
}
obj = document.getElementById("clippingsCounter");
obj.innerHTML = "<a href=\"javascript:eventShowNextClipping()\">unread excerpts:"+total+"</a><br><br>";
}
JS代码(window.js):
var mouseX = mouseY =0;
//returns height,width and other window information
//works in NS6 and IE5(Mac/Win)
function screenObject(){
this.bottom = function(){
if (document.body.scrollHeight) return document.body.scrollHeight}
;
this.height = function(){
if (document.body.offsetHeight) return document.body.offsetHeight;
}
this.visHeight = function(){
if (window.innerHeight) return window.innerHeight;
if (document.body.clientHeight) return document.body.clientHeight;
}
this.width = function(){
if (document.body.offsetWidth) return document.body.offsetWidth;
}
this.scrollTop = function(){
if(document.body.scrollTop) return document.body.scrollTopif (window.pageYOffset) return window.pageYOffset;
else return 0;
}
;
}
function mousePosition(e){
if (e) event = e;
//for NetscapemouseX = event.clientX;
mouseY = event.clientY;
}
//resize the clippings container
function windowResize(){
clippingsSetContainerHeight()}
CSS代码(css.css):
BODY{text-align:center;}
td{font-size:12px;line-height:18px;}
#excerpts{BORDER-RIGHT:#bebebe 1px solid;BORDER-TOP:#bebebe 1px solid;Z-INDEX:9;VISIBILITY:hidden;BORDER-LEFT:#bebebe 1px solid;BORDER-BOTTOM:#bebebe 1px solid;POSITION:absolute;}
分享到QQ
分享到微博
微信扫一扫
