snipt

Ctrl+h for KB shortcuts

HTML

RWD by myself

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="./jquery.js"></script>
    <title>GG</title>
    <style>
      *{
        margin:0px;
        padding:0px;
      }
      .img{
        position: absolute;
        top:-10px;
        max-width:800px;
      }
      #fb-button{
        /*background-color:rgba(0,0,0,0.5);*/
        position:absolute;
        top:970px;
        left:48px;
        width:718px;
        height:150px;
        cursor:pointer;
      }

    </style>
    <script>
      window.mobilecheck = function() {
        var check = false;
        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
      }
      function adaptScreen(){
        var window_height = $(window).height();
        var window_width = $(window).width();
        var IMG_SIZE = {"width": 800,"height": 1280};
        var rate = window_height / IMG_SIZE.height;
        var final_width = IMG_SIZE.width * rate;
        $(".img").css({"margin-left":(window_width-final_width)/2+"px","height":window_height+"px","top": "0px"});

        $("#fb-button").css({"top":(970*rate)+"px", "left": (48*rate+(window_width-final_width)/2)+"px", "height": (150*rate)+"px", "width":(718*rate)+"px"});
      }
      function adaptCellphoneScreen(){
        var window_height = $(window).height();
        var window_width = $(window).width();
        var IMG_SIZE = {"width": 800,"height": 1280};
        var rate = window_width / IMG_SIZE.width;
        var final_height = IMG_SIZE.height * rate;
        $(".img").css({"margin-top":(window_height-final_height)/2+"px","width":window_width+"px"});
        $("#fb-button").css({"top":(970*rate+(window_height-final_height)/2-10)+"px", "left": (48*rate)+"px", "height": (150*rate)+"px", "width":(718*rate)+"px"});
      }
      $(function(){
        console.log($(".img").width());
        $("#fb-button").click(function(){
          window.location.href="[other web site]";
        });
        if(window.mobilecheck()){
          adaptCellphoneScreen();  
        }else{
          adaptScreen();
        }
        $(window).resize(function(){
          if(window.mobilecheck()){
            adaptCellphoneScreen();  
          }else{
            adaptScreen();
          } 
        })
      });
    </script>
  </head>
  <body>
    <img class="img" src="1.jpg" alt="facebook activity for digital branch"/>
    <div id="fb-button"></div>
  </body>
</html>

Description

補上手機版本
https://snipt.net/embed/800377564095c85e05710f097b37e989/
/raw/800377564095c85e05710f097b37e989/
800377564095c85e05710f097b37e989
html
HTML
80
2019-08-18T21:34:57
True
False
False
Mar 09, 2016 at 08:31 PM
/api/public/snipt/144643/
rwd-by-myself
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a> <a href="#L-67">67</a> <a href="#L-68">68</a> <a href="#L-69">69</a> <a href="#L-70">70</a> <a href="#L-71">71</a> <a href="#L-72">72</a> <a href="#L-73">73</a> <a href="#L-74">74</a> <a href="#L-75">75</a> <a href="#L-76">76</a> <a href="#L-77">77</a> <a href="#L-78">78</a> <a href="#L-79">79</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="cp">&lt;!doctype html&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span> </span><span id="L-5"><a name="L-5"></a> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;IE=edge&quot;</span><span class="p">&gt;</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;</span><span class="p">&gt;</span> </span><span id="L-7"><a name="L-7"></a> <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;./jquery.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>GG<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span><span id="L-9"><a name="L-9"></a> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-10"><a name="L-10"></a> <span class="o">*</span><span class="p">{</span> </span><span id="L-11"><a name="L-11"></a> <span class="nb">margin</span><span class="o">:</span><span class="m">0px</span><span class="p">;</span> </span><span id="L-12"><a name="L-12"></a> <span class="nb">padding</span><span class="o">:</span><span class="m">0px</span><span class="p">;</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">}</span> </span><span id="L-14"><a name="L-14"></a> <span class="nc">.img</span><span class="p">{</span> </span><span id="L-15"><a name="L-15"></a> <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span> </span><span id="L-16"><a name="L-16"></a> <span class="nb">top</span><span class="o">:-</span><span class="m">10px</span><span class="p">;</span> </span><span id="L-17"><a name="L-17"></a> <span class="nb">max-width</span><span class="o">:</span><span class="m">800px</span><span class="p">;</span> </span><span id="L-18"><a name="L-18"></a> <span class="p">}</span> </span><span id="L-19"><a name="L-19"></a> <span class="nn">#fb-button</span><span class="p">{</span> </span><span id="L-20"><a name="L-20"></a> <span class="c">/*background-color:rgba(0,0,0,0.5);*/</span> </span><span id="L-21"><a name="L-21"></a> <span class="nb">position</span><span class="o">:</span><span class="nb">absolute</span><span class="p">;</span> </span><span id="L-22"><a name="L-22"></a> <span class="nb">top</span><span class="o">:</span><span class="m">970px</span><span class="p">;</span> </span><span id="L-23"><a name="L-23"></a> <span class="nb">left</span><span class="o">:</span><span class="m">48px</span><span class="p">;</span> </span><span id="L-24"><a name="L-24"></a> <span class="nb">width</span><span class="o">:</span><span class="m">718px</span><span class="p">;</span> </span><span id="L-25"><a name="L-25"></a> <span class="nb">height</span><span class="o">:</span><span class="m">150px</span><span class="p">;</span> </span><span id="L-26"><a name="L-26"></a> <span class="nb">cursor</span><span class="o">:</span><span class="nb">pointer</span><span class="p">;</span> </span><span id="L-27"><a name="L-27"></a> <span class="p">}</span> </span><span id="L-28"><a name="L-28"></a> </span><span id="L-29"><a name="L-29"></a> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-30"><a name="L-30"></a> <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-31"><a name="L-31"></a> <span class="nb">window</span><span class="p">.</span><span class="nx">mobilecheck</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span><span id="L-32"><a name="L-32"></a> <span class="kd">var</span> <span class="nx">check</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> </span><span id="L-33"><a name="L-33"></a> <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span><span class="k">if</span><span class="p">(</span><span class="sr">/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span><span class="o">||</span><span class="sr">/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">a</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">4</span><span class="p">)))</span><span class="nx">check</span> <span class="o">=</span> <span class="kc">true</span><span class="p">})(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="o">||</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">vendor</span><span class="o">||</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">);</span> </span><span id="L-34"><a name="L-34"></a> <span class="k">return</span> <span class="nx">check</span><span class="p">;</span> </span><span id="L-35"><a name="L-35"></a> <span class="p">}</span> </span><span id="L-36"><a name="L-36"></a> <span class="kd">function</span> <span class="nx">adaptScreen</span><span class="p">(){</span> </span><span id="L-37"><a name="L-37"></a> <span class="kd">var</span> <span class="nx">window_height</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span> </span><span id="L-38"><a name="L-38"></a> <span class="kd">var</span> <span class="nx">window_width</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> </span><span id="L-39"><a name="L-39"></a> <span class="kd">var</span> <span class="nx">IMG_SIZE</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;width&quot;</span><span class="o">:</span> <span class="mi">800</span><span class="p">,</span><span class="s2">&quot;height&quot;</span><span class="o">:</span> <span class="mi">1280</span><span class="p">};</span> </span><span id="L-40"><a name="L-40"></a> <span class="kd">var</span> <span class="nx">rate</span> <span class="o">=</span> <span class="nx">window_height</span> <span class="o">/</span> <span class="nx">IMG_SIZE</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span> </span><span id="L-41"><a name="L-41"></a> <span class="kd">var</span> <span class="nx">final_width</span> <span class="o">=</span> <span class="nx">IMG_SIZE</span><span class="p">.</span><span class="nx">width</span> <span class="o">*</span> <span class="nx">rate</span><span class="p">;</span> </span><span id="L-42"><a name="L-42"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.img&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;margin-left&quot;</span><span class="o">:</span><span class="p">(</span><span class="nx">window_width</span><span class="o">-</span><span class="nx">final_width</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span><span class="s2">&quot;height&quot;</span><span class="o">:</span><span class="nx">window_height</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span><span class="s2">&quot;top&quot;</span><span class="o">:</span> <span class="s2">&quot;0px&quot;</span><span class="p">});</span> </span><span id="L-43"><a name="L-43"></a> </span><span id="L-44"><a name="L-44"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#fb-button&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;top&quot;</span><span class="o">:</span><span class="p">(</span><span class="mi">970</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="p">(</span><span class="mi">48</span><span class="o">*</span><span class="nx">rate</span><span class="o">+</span><span class="p">(</span><span class="nx">window_width</span><span class="o">-</span><span class="nx">final_width</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;height&quot;</span><span class="o">:</span> <span class="p">(</span><span class="mi">150</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;width&quot;</span><span class="o">:</span><span class="p">(</span><span class="mi">718</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">});</span> </span><span id="L-45"><a name="L-45"></a> <span class="p">}</span> </span><span id="L-46"><a name="L-46"></a> <span class="kd">function</span> <span class="nx">adaptCellphoneScreen</span><span class="p">(){</span> </span><span id="L-47"><a name="L-47"></a> <span class="kd">var</span> <span class="nx">window_height</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span> </span><span id="L-48"><a name="L-48"></a> <span class="kd">var</span> <span class="nx">window_width</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> </span><span id="L-49"><a name="L-49"></a> <span class="kd">var</span> <span class="nx">IMG_SIZE</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;width&quot;</span><span class="o">:</span> <span class="mi">800</span><span class="p">,</span><span class="s2">&quot;height&quot;</span><span class="o">:</span> <span class="mi">1280</span><span class="p">};</span> </span><span id="L-50"><a name="L-50"></a> <span class="kd">var</span> <span class="nx">rate</span> <span class="o">=</span> <span class="nx">window_width</span> <span class="o">/</span> <span class="nx">IMG_SIZE</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span> </span><span id="L-51"><a name="L-51"></a> <span class="kd">var</span> <span class="nx">final_height</span> <span class="o">=</span> <span class="nx">IMG_SIZE</span><span class="p">.</span><span class="nx">height</span> <span class="o">*</span> <span class="nx">rate</span><span class="p">;</span> </span><span id="L-52"><a name="L-52"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.img&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;margin-top&quot;</span><span class="o">:</span><span class="p">(</span><span class="nx">window_height</span><span class="o">-</span><span class="nx">final_height</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span><span class="s2">&quot;width&quot;</span><span class="o">:</span><span class="nx">window_width</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">});</span> </span><span id="L-53"><a name="L-53"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#fb-button&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;top&quot;</span><span class="o">:</span><span class="p">(</span><span class="mi">970</span><span class="o">*</span><span class="nx">rate</span><span class="o">+</span><span class="p">(</span><span class="nx">window_height</span><span class="o">-</span><span class="nx">final_height</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="o">-</span><span class="mi">10</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="p">(</span><span class="mi">48</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;height&quot;</span><span class="o">:</span> <span class="p">(</span><span class="mi">150</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">,</span> <span class="s2">&quot;width&quot;</span><span class="o">:</span><span class="p">(</span><span class="mi">718</span><span class="o">*</span><span class="nx">rate</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span><span class="p">});</span> </span><span id="L-54"><a name="L-54"></a> <span class="p">}</span> </span><span id="L-55"><a name="L-55"></a> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-56"><a name="L-56"></a> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.img&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span> </span><span id="L-57"><a name="L-57"></a> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#fb-button&quot;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-58"><a name="L-58"></a> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="o">=</span><span class="s2">&quot;[other web site]&quot;</span><span class="p">;</span> </span><span id="L-59"><a name="L-59"></a> <span class="p">});</span> </span><span id="L-60"><a name="L-60"></a> <span class="k">if</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">mobilecheck</span><span class="p">()){</span> </span><span id="L-61"><a name="L-61"></a> <span class="nx">adaptCellphoneScreen</span><span class="p">();</span> </span><span id="L-62"><a name="L-62"></a> <span class="p">}</span><span class="k">else</span><span class="p">{</span> </span><span id="L-63"><a name="L-63"></a> <span class="nx">adaptScreen</span><span class="p">();</span> </span><span id="L-64"><a name="L-64"></a> <span class="p">}</span> </span><span id="L-65"><a name="L-65"></a> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">resize</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-66"><a name="L-66"></a> <span class="k">if</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">mobilecheck</span><span class="p">()){</span> </span><span id="L-67"><a name="L-67"></a> <span class="nx">adaptCellphoneScreen</span><span class="p">();</span> </span><span id="L-68"><a name="L-68"></a> <span class="p">}</span><span class="k">else</span><span class="p">{</span> </span><span id="L-69"><a name="L-69"></a> <span class="nx">adaptScreen</span><span class="p">();</span> </span><span id="L-70"><a name="L-70"></a> <span class="p">}</span> </span><span id="L-71"><a name="L-71"></a> <span class="p">})</span> </span><span id="L-72"><a name="L-72"></a> <span class="p">});</span> </span><span id="L-73"><a name="L-73"></a> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-74"><a name="L-74"></a> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span><span id="L-75"><a name="L-75"></a> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span><span id="L-76"><a name="L-76"></a> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;img&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;1.jpg&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;facebook activity for digital branch&quot;</span><span class="p">/&gt;</span> </span><span id="L-77"><a name="L-77"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;fb-button&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-78"><a name="L-78"></a> <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span><span id="L-79"><a name="L-79"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
RWD, html, javascript
--- 
+++ 
@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <script src="./jquery.js"></script>
+    <title>GG</title>
+    <style>
+      *{
+        margin:0px;
+        padding:0px;
+      }
+      .img{
+        position: absolute;
+        top:-10px;
+        max-width:800px;
+      }
+      #fb-button{
+        /*background-color:rgba(0,0,0,0.5);*/
+        position:absolute;
+        top:970px;
+        left:48px;
+        width:718px;
+        height:150px;
+        cursor:pointer;
+      }
+
+    </style>
+    <script>
+      window.mobilecheck = function() {
+        var check = false;
+        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
+        return check;
+      }
+      function adaptScreen(){
+        var window_height = $(window).height();
+        var window_width = $(window).width();
+        var IMG_SIZE = {"width": 800,"height": 1280};
+        var rate = window_height / IMG_SIZE.height;
+        var final_width = IMG_SIZE.width * rate;
+        $(".img").css({"margin-left":(window_width-final_width)/2+"px","height":window_height+"px","top": "0px"});
+
+        $("#fb-button").css({"top":(970*rate)+"px", "left": (48*rate+(window_width-final_width)/2)+"px", "height": (150*rate)+"px", "width":(718*rate)+"px"});
+      }
+      function adaptCellphoneScreen(){
+        var window_height = $(window).height();
+        var window_width = $(window).width();
+        var IMG_SIZE = {"width": 800,"height": 1280};
+        var rate = window_width / IMG_SIZE.width;
+        var final_height = IMG_SIZE.height * rate;
+        $(".img").css({"margin-top":(window_height-final_height)/2+"px","width":window_width+"px"});
+        $("#fb-button").css({"top":(970*rate+(window_height-final_height)/2-10)+"px", "left": (48*rate)+"px", "height": (150*rate)+"px", "width":(718*rate)+"px"});
+      }
+      $(function(){
+        console.log($(".img").width());
+        $("#fb-button").click(function(){
+          window.location.href="[other web site]";
+        });
+        if(window.mobilecheck()){
+          adaptCellphoneScreen();  
+        }else{
+          adaptScreen();
+        }
+        $(window).resize(function(){
+          if(window.mobilecheck()){
+            adaptCellphoneScreen();  
+          }else{
+            adaptScreen();
+          } 
+        })
+      });
+    </script>
+  </head>
+  <body>
+    <img class="img" src="1.jpg" alt="facebook activity for digital branch"/>
+    <div id="fb-button"></div>
+  </body>
+</html>
  • aha
  • 3 years, 5 months ago