JS文字滚动和google地图位置选择搜索_ajax_JavaScript_其他

<!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></title> <style type="text/css"> body { font-size: 12px; } h2 { color: Green; } .comment { color: Gray; } .location { } /*Location picker css*/.location-picker-div { padding: 3px; display: none; background: white; border: green solid 3px; } .location-picker-map { width: 500px; height: 400px; border: solid 1px blue; } /*announcement css*/.announcement { margin-top: 10px; overflow: hidden; height: 200px; } .announcement-box { margin: 0; padding: 0; } .announcement ul dl { margin: 0; } .announcement ul dt { color: Green; } .announcement ul dd { list-style: none outside none; margin: 0; padding: 0 0 0 10px; } .announcement-item { padding-bottom: 10px; } </style> <script type="text/javascript" src="http://www.google.cn/jsapi?key=ABQIAAAAa46GXG-rPqWjEooIJ6dHJxRY8_Rq5H0S7RisTyTlOPiY6-m7PBTaa8eFABRMTNx6lmNnGJ19v1PSDA"></script> <script type="text/javascript"> google.load("jquery", "1.4.2"); google.load("maps", "3", { "other_params": "sensor=false" }); </script>  <script type="text/javascript" src="demo_files/jquery.location.picker.js"></script> <script type="text/javascript" src="http://www.ip-look-up.com/Services/ipInfo.js"></script> <script src="demo_files/jquery.rolling.js" type="text/javascript"></script> <script src="demo_files/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#location").locationpicker({ zoom: 11, location: { latitude: ipLocation.latitude, longitude: ipLocation.longitude} }); $(".location-picker-div").corner(); $(".announcement").rolling({ rollingBox: ".announcement-box", rollingItem: ".announcement-item", direction: "top", delay: 2000, animateDuration: 500 }); }); </script> </head> <body> <h2> Location Picker</h2> <div class="location"> 位置:<input type="text" id="location" /><span class="comment">(放到最大后右键可以获得一个点的坐标)</span> </div> <h2> Rolling content</h2> <span class="comment">(根据内容宽高度计算滚动距离的效果插件)</span> <div class="announcement"> <ul class="announcement-box"> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> <li class="announcement-item"> <dl> <dt>测试通告</dt> <dd> 内容很多，测试内容，每项高度不一样<br /> 内容很多，测试内容，每项高度不一样<br /> </dd> </dl> </li> </ul> </div> </body> </html>