<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <mce:script src="jquery-1.4.1.js" mce_src="jquery-1.4.1.js"><!-- // --></mce:script> </head> <mce:style><!-- body { margin: 0; background: #FFF; } #Scroll { width: 649px; height: 410px; border: solid #CCCCCC 1px; background: url(lan2.jpg) repeat-y; margin-left: 100px; } #tiao { padding-top: 10px; background: #000; cursor: hand; width: 45px; margin-left: 604px; } --></mce:style><style mce_bogus="1"> body { margin: 0; background: #FFF; } #Scroll { width: 649px; height: 410px; border: solid #CCCCCC 1px; background: url(lan2.jpg) repeat-y; margin-left: 100px; } #tiao { padding-top: 10px; background: #000; cursor: hand; width: 45px; margin-left: 604px; } </style> <mce:script type="text/javascript"><!-- var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([/d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox//([/d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome//([/d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([/d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version//([/d.]+).*safari/)) ? Sys.safari = s[1] : 0; //以下进行测试 // if (Sys.ie) document.write('IE: ' + Sys.ie); // if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); // if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); // if (Sys.opera) document.write('Opera: ' + Sys.opera); //if (Sys.safari) document.write('Safari: ' + Sys.safari); $(document).ready(function(){ var height = document.getElementById('news').scrollHeight; alert(height) if (height > 410) { height = height / 410; scrollSize = (410 / height); $("#tiao").css("height", scrollSize + "px"); } }); var scrollSize; var bool = false; var clickY; var moveY; var hei; var y2; function ScrollOnClick(e){ bool = true; if (Sys.firefox) clickY = e.pageY; else clickY = e.y; var x = document.getElementById("tiao").offsetLeft; var y = document.getElementById("tiao").offsetTop; y2 = document.getElementById("Scroll").offsetTop; hei = clickY - y; } function ScrollOnMouseMove(e){ if (bool == true) { if (Sys.firefox) moveY = e.pageY; else moveY = e.y; if (Sys.ie) { if (Sys.ie == 8.0) var size = (moveY - hei) - y2 else var size = (moveY - hei) } else { var size = (moveY - hei) - y2; } if (size < (400 - scrollSize) && size > -1) { $("#tiao").css("margin-top", size); var height = document.getElementById('news').scrollHeight; height = height / 360; var scrollTop = document.getElementById('news').scrollTop; document.getElementById('news').scrollTop = size * height; } } } function ScrollOnMouseUp(e){ bool = false; } // --></mce:script> <body> <div id="Scroll"> <div id = "news" style=" color:#FBAA8C;position:absolute; overflow:scroll;overflow:hidden;height:410px; width:600px "> star <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> end </div> <div align="right"> <div id="tiao" οnmοuseοut="ScrollOnMouseUp();" οnmοusemοve="ScrollOnMouseMove(event);" οnmοusedοwn="ScrollOnClick(event);" οnmοuseup="ScrollOnMouseUp();"> </div> </div> </div> <mce:script type="text/javascript"><!-- // --></mce:script> </body> </html>
