jQuery脚本互相攻击？

时间：2017-04-26 02:30:30

标签： javascript jquery

我正在为我的UI / UX类创建一个电影网站，但似乎有一些破坏的脚本。我不知道格式化的最佳方法，因为我有多个脚本，

我首先放入CircleType.js来制作电影海报上的“BUDAPEST”曲目。这一切都很好，直到我还放了一个jQuery tools overlay，这样当你点击“WATCH THE TRAILER”时它会覆盖背景并在那个窗口中打开一个外部链接。我进入了它，但它使文本“布达佩斯”没有拱起。

对于背景，我在HTML和CSS方面非常扎实，但对于Javascript和jQuery来说却相当新。可能有些小我做错了但我只是没有知识可以看到它。如果您有任何问题，请告诉我，并提前感谢您的帮助。

<script language="javascript">
    $(function() {

      // if the function argument is given to overlay,
      // it is assumed to be the onBeforeLoad event listener
      $("a[rel]").overlay({

        mask: 'black',
        effect: 'apple',

        onBeforeLoad: function() {

          // grab wrapper element inside content
          var wrap = this.getOverlay().find(".contentWrap");

          // load the page specified in the trigger
          wrap.load(this.getTrigger().attr("href"));
        }

      });
    });
  </script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
	font-size: 11px;
	font-style: normal;
	margin: 0;
	font-family: 'Copse', serif;
}


/*****************BACKGROUND**********/
body {
    background-color: #575964;
    height: 100%;
	  width: 100%;
}

 #overlay {
    background-image: url(overlay.png);
    color: #efefef;
    height: 450px;
  }
  
  /* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height: 441px;
    overflow-y: auto;
}

/*****************TITLE*************/
h2, h3 {
	text-align: center;
	color: #ffda85;
	font-family: 'Halant', serif;
}

h2 {
	font-size: 50px;
	font-weight: 300;
}

h2.grand {
	margin-top: -20px;
}

h3 {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
}

h3.the {
	margin-top: 60px;
}

h3.hotel {
	margin: -50px 0 0 0;
}

#circle { 
	font-family: 'Halant', serif;
	font-size: 80px; 
	margin: -50px 0 0 0;
	font-weight: 300; 
	text-align: center;
	color: #ffda85;
}

/****************BUTTONS***************/
div.container{
	width: 100%;
	margin-top: 50px;
}

div#left {
	width: 600px;
	margin-top: 120px;
	margin-left: 80px;
	float: left;
}
	
div#right {
	margin-left: 600px;
	margin-right: 100px;
	margin-top: -40px;
	float: right;
}

div.clear {
	clear: both;
}

button {
	font-family: 'Copse', serif;
	background-color: Transparent;
	color: #000;
	text-decoration: none;
	border: 1px solid #fff;
	outline: none;
	padding: 15px 90px;
	font-size: 15px;
	letter-spacing: 5px;
	text-align: center;

}

a:hover {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 19px 0 16px 0;
	font-weight: 600;
}
}
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
  <title>GRAND BUDAPEST HOTEL</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.lettering.js"></script>
  <script type="text/javascript" src="circletype.min.js"></script>
  <script type="text/javascript" src="jquery.tools.min.js"></script>
 
</head>

<body>
  <h3 class="the">THE</h3><br>
  <h2 class="grand">GRAND</h2><br>

  <div id="circle">BUDAPEST</div>
  <script>
    $('#circle').circleType({
      radius: 384
    });
  </script>

  <h3 class="hotel">HOTEL</h3><br>
  <div id="container">
    <div id="left">
      <a href="external-content.htm" rel="#overlay" style="text-decoration:none">
        <button type="button">MEET THE CAST</button>
      </a>
    </div>

    <div id="right">
      <a href="trailer.htm" rel="#overlay" style="text-decoration:none">
        <button type="button">WATCH THE TRAILER</button>
      </a>

      <!-- overlayed element -->
      <div class="apple_overlay" id="overlay">
        <div class="contentWrap"></div>
      </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：-1)

首先进行这些更改：

<script language="javascript">
    $(document).ready(function () {

      // if the function argument is given to overlay,
      // it is assumed to be the onBeforeLoad event listener
      $("a[rel]").overlay({

        mask: 'black',
        effect: 'apple',

        onBeforeLoad: function() {

          // grab wrapper element inside content
          var wrap = this.getOverlay().find(".contentWrap");

          // load the page specified in the trigger
          wrap.load(this.getTrigger().attr("href"));
        }

      });
    });
  </script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
	font-size: 11px;
	font-style: normal;
	margin: 0;
	font-family: 'Copse', serif;
}


/*****************BACKGROUND**********/
body {
    background-color: #575964;
    height: 100%;
	  width: 100%;
}

 #overlay {
    background-image: url(overlay.png);
    color: #efefef;
    height: 450px;
  }
  
  /* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height: 441px;
    overflow-y: auto;
}

/*****************TITLE*************/
h2, h3 {
	text-align: center;
	color: #ffda85;
	font-family: 'Halant', serif;
}

h2 {
	font-size: 50px;
	font-weight: 300;
}

h2.grand {
	margin-top: -20px;
}

h3 {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
}

h3.the {
	margin-top: 60px;
}

h3.hotel {
	margin: -50px 0 0 0;
}

#circle { 
	font-family: 'Halant', serif;
	font-size: 80px; 
	margin: -50px 0 0 0;
	font-weight: 300; 
	text-align: center;
	color: #ffda85;
}

/****************BUTTONS***************/
div.container{
	width: 100%;
	margin-top: 50px;
}

div#left {
	width: 600px;
	margin-top: 120px;
	margin-left: 80px;
	float: left;
}
	
div#right {
	margin-left: 600px;
	margin-right: 100px;
	margin-top: -40px;
	float: right;
}

div.clear {
	clear: both;
}

button {
	font-family: 'Copse', serif;
	background-color: Transparent;
	color: #000;
	text-decoration: none;
	border: 1px solid #fff;
	outline: none;
	padding: 15px 90px;
	font-size: 15px;
	letter-spacing: 5px;
	text-align: center;

}

a:hover {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 19px 0 16px 0;
	font-weight: 600;
}
}
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
  <title>GRAND BUDAPEST HOTEL</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.lettering.js"></script>
  <script type="text/javascript" src="circletype.min.js"></script>
  <script type="text/javascript" src="jquery.tools.min.js"></script>
 
</head>

<body>
  <h3 class="the">THE</h3><br>
  <h2 class="grand">GRAND</h2><br>

  <div id="circle">BUDAPEST</div>
  <script>
    $('#circle').circleType({
      radius: 384
    });
    function meetCast() {
        // Meet the cast
    }
    function watchTrailer() {
        // Start the trailer
    }
  </script>

  <h3 class="hotel">HOTEL</h3><br>
  <div id="container">
    <div id="left">
        <button type="button" onclick="meetCast()">MEET THE CAST</button>
    </div>

    <div id="right">
        <button type="button" onclick="watchTrailer()">WATCH THE TRAILER</button>

      <!-- overlayed element -->
      <div class="apple_overlay" id="overlay">
        <div class="contentWrap"></div>
      </div>
    </div>
</body>
</html>

相关问题
最新问题