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

  • p4_908754
    了解作者
  • 35.6KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-08 23:06
    上传日期
摘要:脚本资源,Ajax/JavaScript,JS文字滚动  JS文字滚动和google地图位置选择搜索,两个特效集合在了一个网页上,文字滚动这个就先不说了,Google地图选择,这个功能估计有些朋友会需要吧,见有些博客上面有此项功能,示例演示了如何使用Google地图锁定位置。
A104146534-14088.rar
  • okbase.net
  • 文字滚动和google地图位置选择搜索
  • demo_files
  • jquery.rolling.js
    3.9KB
  • jquery-1.4.2.min.js
    70.5KB
  • jquery.location.picker.js
    18.3KB
  • jquery.corner.js
    11.2KB
  • demo.htm
    5.6KB
  • demo.htm~
    1.7KB
内容介绍
<!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 src="demo_files/jquery-1.4.2.min.js" type="text/javascript"></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>
评论
    相关推荐