更新图像交换脚本

时间:2016-07-15 13:09:55

标签: jquery

我有以下代码在jquery 1.6中,我需要在基于jquery 1.10的网站中使用它。我知道有一些变化,但还不够: 好的......必须放置更多文本才能发布。这篇文章需要多长时间才能在网上发布?对此抱歉。

        <!doctype html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <title></title>
    <script type="text/javascript">//<![CDATA[
    $(window).load(function(){
    $(document).ready(function() {
      $('ul.image-switch li').mouseover(function(e) {
        if (e.target.nodeName.toLowerCase() == 'a') return;
        var image_src = $('a', this).data('image');
        var img = $('.image-container img');

        if (img.attr('src') != image_src) { // only do the fade if other image is selected
          img.fadeOut('fast', function() { // fadeout the current image
            img.attr('src', image_src).fadeIn(); // load and fadein new image
          });
        }
      });
    });

    });//]]> 
    </script>
    </head>
    <body>
    <div class="front-produits">
      <div class="row">
        <div class="col-sm-3 text-center">
          <h2>PRODUCTS</h2>
      <div class="image-container"><img name="poster" src="img-swap-blank.png" style="display: inline;"></div>
      </div>
        <div class="col-sm-4">
          <ul class="image-switch">
            <li><a href="1.htm" data-image="img-swap-1.png">Instruments image 1</a> </li>
            <li><a href="2.htm" data-image="img-swap-2.png">Instruments image 2</a> </li>
          </ul>
        </div>
      </div>
    </div>
    </body>
    </html>

0 个答案:

没有答案