代码如下(注意需要引入外部jquery代码):
<!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> <title>动态控制鼠标位置-www.jb200.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".testdiv").bind("click",function(){ var clickId = $(this).attr("id"); var showId = "content" + clickId.substring(7,clickId.length); $("#" + showId).slideToggle(); var obj = document.getElementById(clickId); var scrollX = parseInt($("#mouseX").val()); var scrollY = parseInt($("#mouseY").val()) + parseInt(240); var num = clickId.substring(7,clickId.length); $("html,body").animate({scrollTop: $("#box" + num).offset().top}, 1000); }); $(document).mousemove(function(e){ $("#mouseX").val(e.pageX); $("#mouseY").val(e.pageY); }); }); </script> <style> .testdiv{ background-color:#FFFFCC; width:400px; height:100%; border:1px solid blue; } .content{ background-color:#6699FF; width:400px; height:240px; display:none; border:#3300FF 1px solid; } </style> </head> <body> <p>鼠标指针位于: <span><input type="text" id="mouseY" /><input type="text" id="mouseX" /></span></p> <div class="testdiv" id="testdiv1">111111111111111 <div class="content" id="content1">11111111111111111</div> <span id="box1"/> </div> <div class="testdiv" id="testdiv2">222222222222222222222 <div class="content" id="content2">22222222222222</div> <span id="box2"/> </div> <div class="testdiv" id="testdiv3">33333333333333333 <div class="content" id="content3">3333333333333333333</div> <span id="box3" type="text" /> </div> <div class="testdiv" id="testdiv4">4444444444444444 <div class="content" id="content4"></div> <span id="box4" /> </div> <div class="testdiv" id="testdiv5">555555555555555 <div class="content" id="content5"></div> <span id="box5"/> </div> </body> </html>