zoukankan      html  css  js  c++  java
  • 设置超链接jQuery输入城市查看地图

    新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

            <title></title>   //在这里要注意js引入的先后顺序

        

        <link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="js/jquery.ui.core.js" type="text/javascript"></script>
        <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
        <script src="js/jquery.ui.position.js" type="text/javascript"></script>
        <script src="js/jquery.ui.tooltip.js" type="text/javascript"></script>

            <link href="css/demos.css" rel="stylesheet" type="text/css" />

        

        每日一道理
    生命,是一场漫长的棋局。这盘棋没有猎猎西风,没有四起狼烟,只有在取舍和进退中抉择。只有像棋中的小卒那样,勇往直前,毫不退缩沿着沟沟坎坎的人生之路,艰难而执着的求索,前进,才会谱写人生最壮丽的强者之歌。

        <style type="text/css">
    .photo {
    300px;
    text-align: center;
    }
    .photo .ui-widget-header {
    margin: 1em 0;
    }
    .map {
    350px;
    height: 350px;
    }
    .ui-tooltip {
    max- 350px;
    }
    </style>
    <script type="text/javascript">
       $(function () {
           $(document).tooltip({
               items: "img, [data-geo], [title]",
               content: function () {
                   var element = $(this);
                   if (element.is("[data-geo]")) {
                       var text = element.text();
                       return "<img class='map' alt='" + text +
    "' src='http://maps.google.com/maps/api/staticmap?" +
    "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
    text + "'>";
                   }
                   if (element.is("[title]")) {
                       return element.attr("title");
                   }
                   if (element.is("img")) {
                       return element.attr("alt");
                   }
               }
           });


           $('#Button1').click(function () {
               $('#AName').text($('#Text1').val());
               $('#AName').attr('href', "http://maps.google.com/maps?q="+$('#Text1').val()+"&amp;z=11");
                  
           })
       });
    </script>
    </head>
    <body>
    <div class="ui-widget photo">
    <div class="ui-widget-header ui-corner-all">
            <input id="Text1" type="text" value="China,上海"/><input id="Button1" type="button" value="设置" />


    <h3><a href="http://maps.google.com/maps?q=China,上海&amp;z=11" data-geo id="AName">China,上海</a></h3>


    </div>
    </div>
    </body>

        </html>

        

        使用方法:恣意输入国家和都会,用“,”分开,点击设置面下的超链接就变为了刚设置的都会,点击可以跳到这个都会的看查图地页,鼠标移到超链接上会弹出一个350*350的图地

        

        效果图:

        设置和超链接设置和超链接设置和超链接设置和超链接

        

        

    文章结束给大家分享下程序员的一些笑话语录: 某程序员对书法十分感兴趣,退休后决定在这方面有所建树。花重金购买了上等的文房四宝。一日突生雅兴,一番磨墨拟纸,并点上了上好的檀香,颇有王羲之风 范,又具颜真卿气势,定神片刻,泼墨挥毫,郑重地写下一行字:hello world.

  • 相关阅读:
    hdu4829 带权并查集(题目不错)
    hdu4829 带权并查集(题目不错)
    洛谷 P1076 寻宝(模拟 && 剪枝)
    洛谷 P1981 表达式求值(模拟)
    洛谷 P2239 螺旋矩阵(模拟 && 数学)
    洛谷 P2118 比例简化(枚举)
    洛谷 P3956 棋盘(记忆化搜索)
    洛谷 P5018 对称二叉树(搜索)
    洛谷 P5016 龙虎斗(模拟)
    洛谷 P1563 玩具谜题(模拟)
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3065703.html
Copyright © 2011-2022 走看看