在同一个页面调用两次js特效，怎么修改才能避免冲突！

怎么样能让这段代码在页面出现两次，而且正常使用，要求两个浮动窗口都可以正常显示！谢谢大神了！

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>带关闭按钮的浮动窗口代码(全屏漂浮)</title>
  </head>
  <style type="text/css">
    #fdck {
      border:1px solid #c0c0c0;
      margin:0 auto;
      padding:5px;
      background:#f0f0f0
    }
  </style>
  <body>
    <div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onMouseOver="clearInterval(interval)" onMouseOut="interval = setInterval('changePos()', delay)" align="middle">
      <span style="CURSOR:hand;color:red;font-weight:bold;font-size:12px" onClick="clearInterval(interval);img.style.visibility = 'hidden'">关闭</span>
      <div id="fdck">
        <a href="http://www.baidu.cn">2015年baidu专场招聘会</a>
      </div>
    </div>
    <script language=javascript>
      var xPos = 20;
      var yPos = document.body.clientHeight;
      var step = 1;
      var delay = 30;
      var height = 0;
      var Hoffset = 0;
      var Woffset = 0;
      var yon = 0;
      var xon = 0;
      var pause = true;
      var interval;
      img.style.top = yPos;

      function changePos() {
          width = document.body.clientWidth;
          height = document.body.clientHeight;
          Hoffset = img.offsetHeight;
          Woffset = img.offsetWidth;
          img.style.left = xPos + document.body.scrollLeft;
          img.style.top = yPos + document.body.scrollTop;
          if (yon) {
              yPos = yPos + step;
          } else {
              yPos = yPos - step;
          }
          if (yPos < 0) {
              yon = 1;
              yPos = 0;
          }
          if (yPos >= (height - Hoffset)) {
              yon = 0;
              yPos = (height - Hoffset);
          }
          if (xon) {
              xPos = xPos + step;
          } else {
              xPos = xPos - step;
          }
          if (xPos < 0) {
              xon = 1;
              xPos = 0;
          }
          if (xPos >= (width - Woffset)) {
              xon = 0;
              xPos = (width - Woffset);
          }
      }

      function start() {
          img.style.visibility = "visible";
          interval = setInterval('changePos()', delay);
      }
      start();

    </script>
  </body>
</html>

把上面整一段代码封装成一个方法。然后把所有img替换成某个形参。创建两个实例obj分别传入不同的img运行，就可以了。

【热门文章】