用图片实现滚动条样式

原创 2007年09月21日 16:17:00

很多人对于用 用图片实现滚动条样式不太了解,我也很陌生,查找了资料,这个还不错,大家可以看一下.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2242">
<meta name="Copyright" content="麦兜SKY http://www.schooldf.com" />
<title>麦兜SKY</title>
<style>
/*xiao麦兜SKY*/
body
{text-align:center}
td
{font-size: 12px;line-height: 18px}
a
{text-decoration:none;color:#000000}
a:hover
{text-decoration:underline;color:#000000}
#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}
</style>

<SCRIPT type=text/javascript>
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.scrollTop
        
if (window.pageYOffset) return window.pageYOffset;
        
else return 0;}
;
    }


function mousePosition(e)
    
{
    
if (e) event = e;   //for Netscape
    mouseX = event.clientX;
    mouseY 
= event.clientY;
    }

    
//resize the clippings container    
function windowResize()
    
{
    clippingsSetContainerHeight()
    }

</SCRIPT>

<SCRIPT type=text/javascript>


ThreeOhScroll.mo5 
= navigator.userAgent.indexOf("Gecko"!= -1
ThreeOhScroll.ie5 
= navigator.appName == "Microsoft Internet Explorer" && document.getElementById

ThreeOhScroll.aniLen 
= 250

function ThreeOhScroll(id)
{
    
if (ThreeOhScroll.mo5 || ThreeOhScroll.ie5) {
        
this.id = id
        
this.getMembers(document.getElementById(id))

        
this.clipH        = parseInt(this.container.style.height)
        
this.PTags        = this.content.getElementsByTagName("P")
        
var lastP        = this.PTags[this.PTags.length-1];
        
var lastPTop    = lastP.offsetTop - (ThreeOhScroll.mo5 ? 108 : 0);
        
this.docH        = lastPTop + Math.max(lastP.offsetHeight, this.clipH)
        
this.scrollH    = this.docH - this.clipH
        
this.markersMax    = parseInt(this.markers.style.height) - 7
        
this.thumbMax    = parseInt(this.thumbContainer.style.height) - this.thumbImg.height
        
this.arrowMax    = parseInt(this.arrowContainer.style.height) - this.arrowImg.height

        
this.gRef = "ThreeOhScroll_"+id
        eval(
this.gRef+"=this")
        
this.thumb.obj    = this
        
this.thumb.onmousedown = this.startDrag
        
this.thumb.onmouseover = Function(this.gRef + ".toggleThumb(1)")
        
this.thumb.onmouseout  = Function(this.gRef + ".toggleThumb(0)")
        
this.thumb.onmousup       = Function(this.gRef + ".toggleThumb(0)")
        
this.thumb.ondragstart = function() return false }
        
this.initMarkers()
    }

}


ThreeOhScroll.prototype.initMarkers 
= function() {
    
var shtml = "", sTitle, iTop
    
for (var i = 0; i < this.PTags.length; i++{
        sTitle    
= this.PTags[i].getAttribute("description")
        pTop    
= this.PTags[i].offsetTop - (ThreeOhScroll.mo5 ? 108 : 0)
        iTop    
= Math.round(pTop * this.markersMax / this.scrollH)
        
if (sTitle && sTitle != "" && sTitle != null{
            shtml  
+= "<div id='" + this.id + "_marker_" + i + ""
            shtml  
+= "style='position:absolute; left:2px; top:" + (iTop + 2+ "px; "
            shtml  
+= "width:5px; height:3px; clip:rect(0 5 3 0); background-color:#CCCCCC; z-index:3;'></div>"
            shtml  
+= "<div style='position:absolute; left:0px; top:" + iTop + "px; "
            shtml  
+= "cursor:pointer; cursor:hand; width:9px; height:7px; clip:rect(0 9 7 0); z-index:4;' " 
            shtml  
+= "onmousedown='" + this.gRef + ".scrollTo(" + pTop + ")' "
            shtml  
+= "onmouseover='" + this.gRef + ".toggleMarker(this, " + i + ", 1)' "
            shtml  
+= "onmouseout='" + this.gRef + ".toggleMarker(this, " + i + ", 0)' "
            shtml  
+= "description='" + sTitle.replace(/'/g, "|pos|") + "'>"
            shtml  += 
"<img src='imgs/ui/1.gif' width='9' height='7'></div>"
        }
    }
    this.markers.innerHTML += shtml
}
// this is so that we only loop through the descendant tree looking for elements one time - it loads faster!
ThreeOhScroll.prototype.getMembers = function(a) {
    this.container=document.getElementById('ypContainer');
    this.content=document.getElementById('ypContent');
    this.markers=document.getElementById('ypMarkers');
    this.thumb=document.getElementById('ypThumb');
    this.arrow=document.getElementById('ypArrow');
    this.thumbImg=document.getElementById('ypThumbImg');
    this.arrowImg=document.getElementById('ypArrowImg');
    this.thumbContainer=document.getElementById('ypThumbContainer');
    this.arrowContainer=document.getElementById('ypArrowContainer');
    this.description=document.getElementById('ypDescription');
    this.descArrow=document.getElementById('ypDescArrow');
}

ThreeOhScroll.prototype.startDrag = function(e) {
    if (!e) e = window.event
    var ey = e.pageY ? e.pageY : e.y
    this.dragLastY = ey
    this.dragStartOffset = ey - parseInt(this.style.top)
    ThreeOhScroll.current = this.obj
    document.onmousemove = this.obj.doDrag
    document.onmouseup = this.obj.stopDrag
    if (this.obj.aniTimer) window.clearInterval(this.obj.aniTimer)
    return false;
}

ThreeOhScroll.prototype.doDrag = function(e) {
    if (!e) e = window.event
    var obj = ThreeOhScroll.current
    var ey = (e.pageY ? e.pageY : e.y)
    var dy = ey - obj.thumb.dragLastY
    var ny = parseInt(obj.thumb.style.top) + dy
    if (ny >= obj.thumbMax) obj.thumb.dragLastY = obj.thumbMax + obj.thumb.dragStartOffset
    else if (ny < 0) obj.thumb.dragLastY = obj.thumb.dragStartOffset
    else obj.thumb.dragLastY = ey
    ny = Math.min(Math.max(ny, 0), obj.thumbMax)
    obj.jumpTo(ny * obj.scrollH / obj.thumbMax)
    return false;
}

ThreeOhScroll.prototype.stopDrag = function() {
    this.onmousemove = null
    this.onmouseup   = null
    ThreeOhScroll.current.toggleThumb(0)
}

ThreeOhScroll.prototype.scrollTo = function(ny) {
    this.endArrow = Math.round(ny * this.markersMax / this.scrollH)
    this.startTime = (new Date()).getTime()
    this.startPos = parseInt(this.content.style.top) * -1
    this.endPos = ny
    this.dist = this.endPos - this.startPos
    this.accel = this.dist / ThreeOhScroll.aniLen / ThreeOhScroll.aniLen
    if (this.aniTimer) this.aniTimer = window.clearInterval(this.aniTimer)
    this.aniTimer = window.setInterval(this.gRef + 
".scroll()", 10)
}

ThreeOhScroll.prototype.scroll = function() {
    var now = (new Date()).getTime()
    var elapsed = now - this.startTime
    if (elapsed > ThreeOhScroll.aniLen) this.endScroll()
    else {
        var t = ThreeOhScroll.aniLen - elapsed
        var ny = this.endPos - t * t * this.accel
        this.jumpTo(ny)
    }
}

ThreeOhScroll.prototype.endScroll = function() {
    this.jumpTo(this.endPos)
    this.arrow.style.top = this.endArrow
    this.aniTimer = window.clearInterval(this.aniTimer)
}

ThreeOhScroll.prototype.jumpTo = function(ny) {
    this.thumb.style.top    = Math.round(ny * this.thumbMax / this.scrollH)
    this.arrow.style.top    = Math.round(ny * this.arrowMax / this.scrollH)
    this.content.style.top    = -ny
}

ThreeOhScroll.prototype.toggleMarker = function(oTrigger, markerNum, bOn) {
    if (bOn) {
        document.getElementById(this.id + 
"_marker_" + markerNum).style.backgroundColor = "#444444"
        if (this.curMarker) this.toggleMarker(this.curMarker, 0)
        this.curMarker = markerNum
        this.descArrow.style.top = parseInt(oTrigger.style.top) + 2 + 
"px"
        this.description.style.left = 
"-400px"
        this.description.style.top = 
"-400px"
        this.description.innerHTML = oTrigger.getAttribute(
"description").replace(/|pos|/g, "'")
        var w = this.description.offsetWidth
        this.description.style.left = 259 - w + "px"
        this.description.style.top = parseInt(oTrigger.style.top) - 1 + "px"
        this.description.style.visibility = "visible"
        this.descArrow.style.visibility = "visible"
        this.container.style.left = "0px"
    } else {
        document.getElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#cccccc"
        this.curMarker = 0
        this.description.style.visibility = "hidden"
        this.descArrow.style.visibility = "hidden"
    }
}

ThreeOhScroll.prototype.toggleThumb = function(bOn) {
    //this.arrow.style.backgroundColor = this.thumb.style.backgroundColor = bOn ? "#7CDAFE" : "#5EBBE7"
}

function ypGetChildNodes(objParent) {
    return (objParent.childNodes ? objParent.childNodes : objParent.children)
}

</SCRIPT>

<SCRIPT type=text/javascript>

allClippings = new Array();  //all Clippings on page
activeClippings = new Array() //all Clippings stored by the user
currentClipping = 0; //where in the list of Clippings is the user
clippingsDivArray = new Array(); //array of all clipping divs on the page, used to find duplicates
cookiesOn = false; //used to make sure cookies are enabled

//this method needs to be called to initialize the clippings
function initClippings()
    {
    createPageClippingsArray()
    loadClippings();
    setClippingsVisibility();        
    updateClippingCounter();
    drawClippings();
    }    



//clipping class
function Clipping(id,headline,URL, read)
    {
    this.id = id;
    this.headline = headline;
    this.URL = URL;
    this.read = read;
    this.clicked = markRead;
    }


//get Clippings from a cookie
function 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, readstate
            activeClippings[i] = new Clipping(tempArray[x],tempArray[x+1],tempArray[x+2],tempArray[x+3])
            x=x+4;
            }}
        }
    }

//saves clippings to cookie    
function 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 clock
           expire = expire.toGMTString();
    finalCookie = tempCookie+"; path=/; expires="+expire;      
      document.cookie = finalCookie;
    }


// detects wether cookies are turned on or not
function 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 cookies to use Clippings.");
    }


//marks a clipping read
function 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 container
    drawClippings();
    }    

//loads the url of the clipping
function loadClippingURL(pos)
    {
    markRead(activeClippings[pos].id);
    n = open(activeClippings[pos].URL,"win"+activeClippings[pos].id);
    }

//load next unread clipping in array
function 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 clippings    
function 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 clippings    
function 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 instead
function drawClippings()
    {
    newHTML = "";
    
    //draw this text if there are no clippigns
    if (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 screen
    clippingsSetContainerHeight();
    }


//sets the height of the clippings container, make sure it does not go off screen
function 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 use
function 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 mac
function 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 page
function 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 selected
        for (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 clicked 
function 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 seletected
    
    if (!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 it
             clippingInstanceVisibility(this.id,
'hidden'
             
             drawClippings();    
             event.cancleBubble = true;
             updateClippingCounter();
            saveClippings();
             }
         }
    }


//sets the number of unread clippings
function 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>";
    }    

</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>
<table width="292" height="205" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
  
<tr>
    
<td>
      
<div id="alltop" style="position:absolute; left: 343px; top: 37px;">
       
<div class=ThreeOhScroll id=filter 
style="top: -3px; left: 130px;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:#007229; left: 6px;cursor:pointer"><img 
class=thumbImg id=ypThumbImg height=50 src="gif.gif" 
width
=9></div>
          
</div>
          
<div class=arrowContainer id=ypArrowContainer 
style="Z-INDEX: 4; LEFT: 6px; WIDTH: 5px; POSITION: absolute; TOP: 0px; HEIGHT: 185px">
            
<div class=arrow id=ypArrow style="POSITION: absolute"><img class=arrowImg 
id=ypArrowImg height=7 src="gif.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"></div>
        
<div class=container id=ypContainer 
style="OVERFLOW: hidden; WIDTH: 284px; CLIP: rect(0px 500px 500px 0px); POSITION: absolute; HEIGHT: 185px; left: 14px; top: -7px;">
          
<div class=content id=ypContent style="POSITION: absolute; TOP: -2px; left: 5px; width: 281px; height: 449px;">
            
<table width="259" border="0" cellspacing="0" cellpadding="2">
              
<tr>
                
<td height="20" bgcolor="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</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="#C1DB7A"><img src="attachments/month_0709/g2007921153252.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <href="http://www.schooldf.com" target="_blank">2007-09-21   麦兜SKY</a></span></td>
              
</tr>
              
<tr>
                
<td height="32" style="padding:5px 0 5px 0">   美是到处都有的;对于我们的眼睛,不是缺少美,而是缺少发现</td>
              
</tr>
            
</table>
            
<p>

    
          
</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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【Qt】QTableView表格滚动条样式实现QStyleSheet

环境:Qt5.3 IDE:QtCreator 效果预览: 垂直与水平滚动条样式 代码: ui->QTableView->verticalScrollBar()->se...

改变滚动条样式,适用于webkit内核的浏览器,平滑返回顶部功能实现

改变滚动条样式,适用于webkit内核的浏览器,平滑返回顶部功能实现 body{ background-color: #2a3542; color: #797979; overflow: ...

VC/MFC加滚动条显示大图片SetScrollRange()、SetScrollInfo()两种思路实现及其两者优劣比较

OnHScroll和OnVScroll只提供16位的位置数据。GetScrollInfo和SetScrollInfo提供32位的滚动条位置数据。因此,一个应用程序在处理GetScrollInfo或Se...

MFC用CButton实现带滚动条的图片显示控件,无须用CScrollBar辅助实现。

我们知道MFC种的Picture控件基本上就是CStatic,而CStatic控件通过ShowScrollBar函数只可以使滚动条现实出来,但是不可以拖动,所以想只用CStatic控件实现大图片的现实...

关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

动画效果 #Books{ width: 1000px; height: auto; margin: ...

html滚动条样式2

  • 2015-01-21 13:18
  • 109KB
  • 下载

jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

看到Louis Han的博客有个图片随滚动条渐显的效果,感觉既华丽又能节省资源,一举两得,于是就开始研究。通过查看其源代码以及google搜索知识,初步搞明白了,它是通过一个js来实现的,下面就来介绍...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)