怎样可以任意移动一个层,并始终定位于窗口的某个地方?
可以用鼠标任意移动一个层,当窗口的滚动条拖动时候,这个层在窗口的位置不变,
即不会看不到(跟随滚动条移动)。
---------------------------------------------------------------
1<html>
2<head>
3<style type="text/css">
4#myChaser {
5position:absolute;
6left:200px;
7top:0px;
8width:250px;
9color:#555555;
10font-size:12px;
11}
12</style>
13</head>
14<body>
15<div id="myChaser">
16位置相对固定的层,可以任意设置。</div>
17<script language="JavaScript">
18var oChaser = {
19topMargin : 25,
20callRate : 10,
21slideTime : 1200,
22maxDiff : document.all ? document.body.clientHeight : window.innerHeight,
23isIE : document.all ? true : false,
24chaserDiv : document[document.all ? "all" : "layers"]["myChaser"]
25}
26
27window.setInterval("oChaser.main( )", oChaser.callRate)
28oChaser.main = function( )
29{
30this.currentY = this.isIE ? this.chaserDiv.style.pixelTop : this.chaserDiv.top
31this.scrollTop = this.isIE ? document.body.scrollTop : window.pageYOffset
32var newTargetY = this.scrollTop + this.topMargin
33
34if ( this.currentY != newTargetY ) {
35
36if ( newTargetY != this.targetY ) {
37this.targetY = newTargetY
38this.slideInit()
39}
40this.slide()
41}
42}
43oChaser.slideInit = function( )
44{
45var now = new Date( )
46this.A = this.targetY - this.currentY
47this.B = Math.PI / ( 2 * this.slideTime )
48this.C = now.getTime( )
49
50if (Math.abs(this.A) > this.maxDiff) {
51this.D = this.A > 0 ? this.targetY - this.maxDiff : this.targetY + this.maxDiff
52this.A = this.A > 0 ? this.maxDiff : -this.maxDiff
53} else {
54this.D = this.currentY
55}
56}
57
58oChaser.slide = function( )
59{
60var now = new Date( )
61var newY = this.A * Math.sin( this.B * ( now.getTime( ) - this.C ) ) + this.D
62newY = Math.round( newY )
63
64if (( this.A > 0 && newY > this.currentY ) ¦ ¦( this.A < 0 && newY < this.currentY )) {
65if ( this.isIE )this.chaserDiv.style.pixelTop = newY
66else this.chaserDiv.top = newY
67}
68}
69</script>
70<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
71<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
72<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
73<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
74<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
75</body>
76</html>