更改視圖端口上的按鈕單擊HTML5，CSS3，JS

我想更改點擊HTML 5流體網格按鈕上的網站視圖，例如，當我用手機點擊按鈕時，我的網站視圖更改爲移動視圖或者您可以說我的視圖端口更改爲移動設備，同樣，當我單擊選項卡視圖時，它會切換到選項卡視圖端口並開始顯示選項卡網站。我的網站已經在流體網格系統。意思是當我改變瀏覽器窗口的大小時，它會改變，但我想通過點擊按鈕來獲得這種效果。僅供參考請看這個鏈接。想要實現類似於右邊的4個按鈕的功能。 http://themeforest.net/item/diverso-bootstrap-responsive-sliding-pages/full_screen_preview/4919410 更改視圖端口上的按鈕單擊HTML5，CSS3，JS

來源

2013-07-20 Usman Tahir

它們在該頁面中嵌入iframe（本質上是另一個文檔）。當你點擊一個圖標時，它會調整iframe的大小。他們可能使用jQuery'on（'click'function（）{}）'來做到這一點。你試過什麼了？ –

我其實很困惑。我正在尋找一些可以動態改變完整站點視口的功能。但感謝給我的方向，這將完全奏效。我想我會自己發佈問題的解決方案。 :) –

<button onclick="tvResize();"><img src="tv.gif"></button> 
<canvas id=c></canvas>

......以上兩個是關鍵的HTML。添加按鈕，以便每一個功能，你將要定位，你想它畫布...

<script type="text/javascript"> 
    var v = yourVideo 
    var canvas = document.getElementById('c'); 
    var context = base.getContext('2d'); 
    var w, h; 

    function tvResize() { 
     w = "400px" 
     h = "100px" 
     canvas.width = w 
     canvas.height = h 
     } 

    context.clearRect(0, 0, w, h) 

    function draw() { 
    context.drawImage(v, 0, 0, w, h) 
     }

看看這個定位思路：someone named notme 然後，您可以創建一個「laptopResize」，「phoneResize」，「skinnyThingResize」等。

來源

2013-07-21 06:25:19

更改視圖端口上的按鈕單擊HTML5，CSS3，JS

回答

相關問題