利用jquery實現伸縮拖拽彈出框



26 102 35



特效描述:利用jquery實現 伸縮拖拽 彈出框,利用jquery實現伸縮拖拽彈出框

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>

2. 引入JS

<script type="text/javascript" src="javascripts/top_up-min.js"></script>

3. HTML代碼

		<div id="page_background"></div>
		<div id="page_wrapper">
      <div id="page_header" onClick="document.location.href = 'http://51qianduan.com'">
        <h2>TopUp</h2>
        <h1>The #1 Javascript Pop Up made by Paul Engel</h1>
      </div>
			<div id="page_content">
			  <h1 class="thanks_for_download_top_up">Thanks for downloading TopUp!</h1>
			  <p>
			    You must be thinking: "Great, I've downloaded TopUp! But now what?". No need to worry, this download is provided with examples and instructions regarding the usage of the library.
			  </p>
			  <h1 class="some_examples">Some examples</h1>
			  <div id="examples">
  			  <span id="images">
            <a href="images/photos/1.jpg" toptions="overlayClose = 1">
              <img src="images/thumbnails/1.jpg"/>
            </a>
            <a href="images/photos/2.jpg" toptions="noGroup = 1, layout = dashboard">
              <img src="images/thumbnails/2.jpg"/>
            </a>
            <a href="images/photos/3.jpg" toptions="effect = appear, layout = quicklook">
              <img src="images/thumbnails/3.jpg"/>
            </a>
            <a href="images/photos/by-ben-adamson.jpg" toptions="effect = clip, layout = quicklook">
              <img src="images/thumbnails/by-ben-adamson.jpg"/>
            </a>
          </span>
          <span>
            <a href="http://www.cqetom.live//v/pv8j1-IcnUE&amp;hl=nl&amp;fs=1&amp;rel=0&amp;hd=1&amp;autoplay=1" toptions="width = 853, height = 505, type = flash, title = Beastie Boys - Sabotage">
              <img src="images/thumbnails/youtube.jpg"/>
            </a>
            <a href="http://www.cqetom.live//0/31_tupac.swf" toptions="width = 550, height = 400, title = How Mr. T killed Tupac, effect = clip">
              <img src="images/thumbnails/swf.jpg"/>
            </a>
            <a href="http://gettopup.com/media/brucelee.flv" toptions="width = 425, height = 344, title = Bruce Lee - Like Water">
              <img src="images/thumbnails/flv.jpg"/>
            </a>
            <a href="http://www.cqetom.live//movies/wb/the_dark_knight/the_dark_knight-tlr2-h.ref.mov" toptions="width = 480, height = 220, title = The Dark Knight, layout = quicklook, shaded = 1">
              <img src="images/thumbnails/quicktime.jpg"/>
            </a>
          </span>
        </div>
			  <br>
			  <h3>When including from gettopup.com (the easiest setup)</h3>
			  <p class="intro">
			    I have put a lot of examples in the <a href="1. Single links/1. TopUp classes.html">examples</a> directory. They are all implemented with this setup.
			  </p>
        <ol>
          <li>
            Put the following in the <span class="code">head</span> element:
            <div class="box code">
              &lt;script type="text/javascript" src="">&lt;/script>
            </div>
            <small>
              <strong>Note: You can configure TopUp (libs, <a href="http://51qianduan.com">fast mode</a>, paths) in the querystring of the URL (read <a href="http://51qianduan.com">documentation</a>)</strong>
            </small>
            <div class="top_padded">
              ( you can also include a specific release by replacing <span class="code">latest</span> with the version e.g. <span class="code">1.3.2</span> )
            </div>
          </li>
        </ol>
        <h3>When hosting the Javascript and images yourself</h3>
			  <p class="intro">
			    Please note that this page is implemented with this setup. I assume hosting TopUp will not be a problem.
			  </p>
        <ol>
          <li>
            Copy the entire(!) <strong>jquery</strong> directory in the same directory as the TopUp Javascript file. TopUp will automatically determine which Javascript libraries
            (jQuery and/or jQuery UI) to include from the <strong>jquery</strong> directory when missing.
            Please note that TopUp will only include <strong>one</strong>(!) file to reduce the amount of HTTP requests! An include will look like this:
            <div class="box code">
              &lt;script type="text/javascript" src="path/to/your/jquery/*.js">&lt;/script>
            </div>
          </li>
          <li>
            Copy the entire(!) <strong>images</strong> directory to the correct location.
            At default, TopUp assumes that the images reside at the same host as the file itself in the following path <span class="code">/images/top_up/</span>.
            You can change the path (and even the host) by changing the variables <span class="code">TopUp.host</span> and <span class="code">TopUp.images_path</span> as the following:
            <div class="box code">
              &lt;script type="text/javascript"><br>
              &lt;/script>
            </div>
            <small>
              <strong>Note:&nbsp; The proper place for Rails developers would be the <span class="code">application.js</span></strong>
            </small>
          </li>
          <li>
            Copy the entire(!) <strong>players</strong> directory to the correct location.
            At default, TopUp assumes that the players reside at the same host as the file itself in the following path <span class="code">/players/</span>.
            You can change the path and host by changing the variables <span class="code">TopUp.host</span> and <span class="code">TopUp.players_path</span> as the following:
            <div class="box code">
              &lt;script type="text/javascript"><br>
              &nbsp; TopUp.players_path = "assets/players/";<br>
              &lt;/script>
            </div>
            <small>
              <strong>Note:&nbsp; The proper place for Rails developers would be the <span class="code">application.js</span></strong>
            </small>
          </li>
          <li>
            Now you start using TopUp on your webpages by putting the following in the <span class="code">head</span> element:
            <div class="box code">
              &lt;script type="text/javascript" src="path/to/your/top_up-min.js">&lt;/script>
            </div>
            <small>
              <strong>Note: You can configure TopUp (libs, <a href="http://51qianduan.com">fast mode</a>, paths) in the querystring of the URL (read <a href="http://51qianduan.com">documentation</a>)</strong>
            </small>
          </li>
        </ol>
        <p>
          Remember: You can still use <strong><a href="http://51qianduan.com">Prototype</a></strong> without having conflicts, just make sure you include TopUp first.
        </p>
      </div><br>
    </div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 放大縮小 變大變小 放大 縮小 變大 變小 縮放 漸隱切換 淡出淡進 淡出 淡進 切換按鈕 縮放切換 表單 表單美化 表單插件 表單美化插件 其他 圖片淡出淡進 圖片淡出 圖片淡進 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 提示框/彈出層 跳轉 按鈕控制
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子