Wie gebe ich in js eine Bildaufforderung?-js-Tutorial-php.cn

Wie gebe ich in js eine Bildaufforderung?

零下一度

Freigeben： 2017-07-17 14:29:59

Original

1074 Leute haben es durchsucht

Wie gebe ich mit js eine Bildaufforderung? Lassen Sie mich unten eines mit Ihnen teilen.

//Sharp jQuery-Instanz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }

        img {
            border: none;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;float: left;
            display: inline;
            margin-right: 10px;
            border: 1px solid #AAAAAA;
        }/* tooltip */#tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }</style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>var x=10;var y=20;
        $(function () {
          $(".tooltip").mouseover(function (e) {              this.title="";              var href=$(this).attr("href")              var tooltip=$('<div id="tooltip"><img src="&#39;+href+&#39;"/></div>')
              tooltip.appendTo("body");              var json={ "top":e.pageY+y+"px", "left":e.pageX+x+"px"};
              $("#tooltip").css(json).show("fast");
          }).mouseout(function () {
              $("#tooltip").remove();
          })
        })</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
    <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li>
    <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg"  alt="苹果 iPod nano"/></a></li>
    <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg"   alt="苹果 iPhone"/></a></li>
    <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a>
    </li>
</ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
    <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod"/></a></li>
    <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a>
    </li>
    <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
    <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie gebe ich in js eine Bildaufforderung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!