<! 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> 555 </title>
<Style>
* {Margin: 0; padding: 0}
# Div1 {width: 250px; position: absolute; display: block; left: 550px; top: 20px; margin: 50px 50px ;}
# Box {
Background-color: # CCF;
Height: 50px;
Top: 0px;
Left: 1px;
Width: 25px;
Position: absolute;
Z-index: 5555;
}
. Scroll-bar {
Position: relative;
Top: 0px;
Left: 5px;
Width: 15px;
Height: 200px;
Background-color: # FFC;
}
# Div2 {width: 250px; position: absolute; left: 300px; top: 20px; margin: 50px 50px ;}
. Scroll-content {position: relative; top: 0px; left: 0px; width: 200px ;}
. Scroll-panel {position: relative; Background-color: # CFF; top: 0px; left: 0px; Height: 200px; overflow: hidden ;}
</Style>
</Head>
<Body>
<SCRIPT>
Window. onload = function ()
{
VaR obox = Document. getelementbyid ("box ");
VaR obar = Document. getelementbyid ("scrollbar ")
VaR odiv1 = Document. getelementbyid ('div1 ');
VaR odiv2 = Document. getelementbyid ('div2 ');
VaR ocontent = Document. getelementbyid ('scrollcontent ');
Obox. style. cursor = "Pointer ";
Obox. onmousedown = function (e ){
VaR d = E | event;
VaR DY = D. clienty-obox. offsettop;
Document. onmousemove = function (EV ){
VaR oevent = EV | event;
VaR Y1 = oevent. clientY-oDiv1.offsetTop-oBox.offsetHeight/2;
VaR y2 = oevent. clientY-oDiv2.offsetTop-25;
If (Y1 <= 0 ){
Y1 = 0; y2 = 0;
}
Else if (Y1> obar. offsetHeight-oBox.offsetHeight ){
Y1 = obar. offsetHeight-oBox.offsetHeight;
Y2 = obar. offsetHeight-oBox.offsetHeight;
// Alert (obar. offsetHeight-oContent.offsetHeight)
}
Obox. style. Top = Y1 + 'px ';
Ocontent. style. Top =-(ocontent. offsetHeight-oBar.offsetHeight) * y2/(obar. offsetHeight-oBox.offsetHeight) + 'px ';
}
Obox. onmouseup = function ()
{Document. onmousemove = NULL; // delete an event
Document. onmousedown = NULL;
};
};
};
</SCRIPT>
<Div id = "div1">
<Div id = "box"> </div>
<Div class = "scroll-bar" id = "scrollbar"> </div>
</Div>
<Div id = "div2">
<Div class = "scroll-panel" id = "scrollpanel">
<Div class = "scroll-content" id = "scrollcontent">
<PRE>
Funeral flower
Hua Xie Hua Fei Tian,
Who is pity for the red fragrance.
Spring Festival,
Flushed and flushed the embroidery window.
The daughter of boudoir,
Melancholy is everywhere.
Hand-picked flowers out of the embroidered window,
Endure the flowers to go back and forth.
Liu Si, Wang fangfei,
Which of the following is peach float and Li Fei.
Tao and Li can try again next year,
She knows who she is next year.
In March,
The swallow between beam is so heartless.
Even if the hair is cool next year,
But the empty nest has been tilted.
Three hundred and sixty days a year,
The wind, the frost, and the sword are fierce.
How long can the bright fresh Yan,
It is difficult to find a wandering dynasty.
Flowers are easy to see and find,
Before the stage sorrow Funeral flowers.
Just put the flowers in tears,
The branches on the sky show blood marks.
Du Fu is speechless at dusk,
The Dutch bank hides the door.
When a person goes to bed,
The cold rain knocked the window was not warm.
Xiaobaoshi,
Half as pity spring half angry spring.
Sorry, spring becomes annoying,
It is speechless.
Song of sorrow outside the Xiaoxiao pavilion,
Zhi is the soul of flowers and birds.
Flowers, souls, birds, and souls,
The birds are ashamed of themselves.
May you have wings on this day,
Fly to the end of the sky with flowers.
At the end of the day, there is xiangqiu.
Without a tip,
A blank pure soil to mask the air.
Check whether you want to clean the database,
Do not confuse the channel.
Erjin died and was buried,
I am not sure why I am lost.
Nong Jin buried the flowers with a smile,
He knows who it is.
The flowers are falling in the spring,
It is the time when the face is red.
One day in spring,
I don't know what to do.
</PRE>
</Div>
</Div>
</Div>
</Body>
</Html>
Poetry rolling self-editing without mouse scrolling