使图像闪烁并自动调整大小到浏览器

时间:2015-02-16 17:45:48

标签: javascript jquery html css

我一直在研究这个html代码,它允许图像闪烁以及自动调整大小到浏览器大小。我有代码工作,将允许它闪烁:

    <html>
    <head>

    <script type="text/javascript">

        function blink() {
            var e = document.getElementById("blinker");
            e.style.visibility = ( e.style.visibility == 'visible' )? 'hidden' : 'visible';
            setTimeout("blink();", 1000);
        }

    </script>

    <body onload="blink();">
          <table id="table">
          <tr><td>
          <img id="blinker" src="plesk_logo_fist_2.png">
          </td></tr>
          </table>
    </body>
    <style type="text/css">
      html, body {
        max-width:100%;
        max-height:auto;
      }
      #table {
        max-width:100%;
        max-height:auto;
        text-align: center;
        vertical-align: middle;
      }
      #table img {
        max-width:100%;
        max-height:auto;
      }
    </style>

将调整大小的代码:

    <html>
    <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .fit { /* set relative picture size */
        max-width: 100%;
        max-height: 100%;
      }
      .center {
        display: block;
        margin: auto;
      }
    </style>

    </head>
    <body>

    <img class="center fit" src="plesk_logo_fist_2.png">    

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" language="JavaScript">
      function set_body_height() { // set body height = window height
        $('body').height($(window).height());
      }
      $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
        setTimeoutInterval(2000,function(){$
        (".element").css({backgroundColor:"none"});});
      });

    </script>

但是,我似乎无法让他们一起工作。任何帮助使这些工作在一起(或使用替代方法)将非常感激。

1 个答案:

答案 0 :(得分:0)

将您的功能闪烁脚本放在设定的身高脚本正上方。