webApp做一個簡單的移動端相簿檢視管理器
跟著慕課網做了第一個webApp,實現一個移動端的相簿管理器
首先,頁面的佈局很簡單:一個放置小圖的ul,和一個放置大圖的容器(在點選之後才顯示,小圖情況下是隱藏大圖的)
html程式碼
css樣式就不說了,很簡單<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webApp相簿的實現</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--<link rel="stylesheet" href="../style/base.css">--> <script src="../js/zepto.min.js"></script> <link rel="stylesheet" href="../style/animate.css"> <link rel="stylesheet" href="../style/index.css"> </head> <body> <div> <ul class="img-container" id="container"> </ul> <div class="large animated fadeInDown " id="large_container" style="display: none"> <img id="large_img"> </div> </div> <script src="../js/index.js"></script> </body> </html>
具體說一下js的實現過程
1、小圖頁面,為了適配更多的裝置,要動態的獲取對應螢幕的大小來動態設定顯示圖片的寬高
var render = function () { var padding = 2; var winWidth = zWin.width(); var picWidth = Math.floor((winWidth - padding * 3) / 4); var tmpl = ''; for(var i = 1;i <= total;i++){ var p = padding; var imgSrc = '../image/'+i+".jpg"; if(i % 4 == 1){ // 如果是每一行的第一張圖,則沒有padding p = 0; } tmpl += '<li data-id="'+i+'" class="animated zoomIn" style = "width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;' + 'padding-top:'+ padding+'px;"><canvas id="cvs_'+i+'" ></canvas></li>'; //用canvas將圖片畫在畫布上,而不是直接使用img var imageObj = new Image(); imageObj.index = i; imageObj.onload = function () { var cvs = $('#cvs_'+this.index)[0].getContext('2d'); cvs.width = this.width; cvs.height = this.height; cvs.drawImage(this,0,0); } imageObj.src = imgSrc; } $('#container').html(tmpl); }
2、在觸控小圖時,視訊中老師講到用一個代理去實現,這個地方還有點沒懂,程式碼如下
$('#container').delegate('li','tap',function () {
//觸控的事件繫結,使用代理
var _id = cid = $(this).attr('data-id');
loadImg(_id);
});
3、在小圖頁面點選圖片時,跳轉到相應的大圖並且顯示放置大圖的容器,那麼要有一個loadImg的函式
函式,載入圖片的時候,要看圖片時一張橫圖還是豎圖,進而設定圖片的顯示的寬高
4、顯示大圖之後,要實現圖片的左右滑動,這就用到了zepto.js。這裡面加入了移動端touch的相關程式碼,可以實現我們所需要的大部分移動端滑動,比如左滑右滑雙擊等。左右滑動時,要有一個把之前的設定的樣式清除的一個動作,所以這裡用到了removeClass,removeEventListener。這裡的animated bounceInRight就是animated裡面已經設定好的一些樣式,直接設定類名就可以實現一個左右滑動的效果。var loadImg = function (id,callback) { $('#large_container').css({ width:zWin.width(), height:zWin.height() }).show(); var imgsrc = '../image/'+id+'.large.jpg'; var imageObj = new Image(); imageObj.onload = function () { var w = this.width; var h = this.height; var winWidth = zWin.width(); var winHeight = zWin.height(); var realw = winHeight * w / h; var paddingLeft = parseInt((winWidth - realw) / 2); var realh = winHeight * h / w; var paddingTop = parseInt((winHeight - realh) / 2); wImage.css('width','auto').css('height' ,'auto'); wImage.css('padding-top','0').css('padding-left','0'); if(h / w > 1.2){ //圖片是一張長圖 wImage.attr('src',imgsrc).css('height',winHeight).css('padding-left',paddingLeft); }else{ //圖片是一張橫圖 wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop); } } imageObj.src = imgsrc; callback&&callback(); }
$('#large_container').swipeLeft(function () {
cid++;
if(cid > total){
cid = total;
}else{
loadImg(cid,function () {
domImage.addEventListener('webkitAnimationEnd',function () {
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd');
},false);
wImage.addClass('animated bounceInRight')
});
}
});
5、單擊大圖時,關閉大圖片及存放其的容器
$('#large_container').tap(function () {
$(this).hide();
});
整個程式碼在火狐瀏覽器下可以很好的執行,但是谷歌瀏覽器還不能實現左右滑動的效果,不知道是不是版本適配的問題???有待解決!!!
相關推薦
webApp做一個簡單的移動端相簿檢視管理器
跟著慕課網做了第一個webApp,實現一個移動端的相簿管理器 首先,頁面的佈局很簡單:一個放置小圖的ul,和一個放置大圖的容器(在點選之後才顯示,小圖情況下是隱藏大圖的) html程式碼 <!DOCTYPE html> <html lang="en">
python---》客戶端與服務端的基礎(做一個簡單的客戶端與服務端)
python 今天我們分享的內容是python簡單的客戶端與服務端,此處僅介紹一些簡單的函數,並作出來一個玩兒玩兒。 在開始之前呢,先用一張圖表示他們之間的關系 我們來按照這個步伐依次介紹:服務端:import socketserver=socket.socket()#此處是為了創建
web前端課程技術內容之如何做一個簡單的手機端頁面的翻頁
【如何做一個簡單的手機端頁面的翻頁】 第一步:建立移動端頁面內 HTML + CSS 【注】可用彈性佈局 但需要注意的是 外層盒子的定位 第二步: 思考問題 要實現怎樣的效果? 手指滑動時觸發事件【左右】兩個方向 2.點選footer部分的下標實現切換效果 3.點選footer部分的下標實
用Java GUI做一個簡單的管理系統
java 管理系統 gui 1.先完成主頁面MainUI(代碼如下)package com.pag_1; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.
android篇-如何做一個簡單的安卓源碼查看器
android1,網頁源碼查看器:Httpurlconnection:用於發送或接收數據Mainactivity篇:import java.io.InputStream;import java.net.HttpURLConnection;import java.net.MalformedURLExceptio
使用Multiplayer Networking做一個簡單的多人遊戲例子-1/2
lap settings isl log atime round 窗口 bottom -m 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 本文主要講述了如何使用Multiplayer Networ
利用文件打開方式with open('文件名',方式) as 變量名做一個簡單的復制(排除大文件bug)
family rwx usr linux 利用 免除 數據 都是 lines 1 #!usr/bin/env python 2 #-*- coding=utf-8 -*- 3 4 with open(‘b.py‘,‘r‘) as obj1, open(‘c.py‘
WebBrowser控件做一個簡單便捷的程序
做成 電腦桌面 地址 布局 bug 參考 快捷圖標 都是 技術分享 備註(這個程序很簡單,只是為了方便快捷) 現在的信息管理系統都是像web form類似,所以必需打開瀏覽器才可以用。每次用到時都要打開瀏覽器登錄,覺得很麻煩。如何把它做成一個像已經安裝在自己電腦桌面的應用程
C#做一個簡單的進行串口通信的上位機
時序 網上 fun style 什麽 函數 數值 pos 表示 C#做一個簡單的進行串口通信的上位機 1、上位機與下位機 上位機相當於一個軟件系統,可以用於接收數據、控制數據。即可以對接收到的數據直接發送操控命令來操作數據。上位機可以接收下位機的信號。下位機是一個
tkinter做一個簡單的登陸頁面
簡單 ble command inpu pre color right lac png 做一個簡單的登陸頁面 1 import tkinter 2 3 wuya = tkinter.Tk() 4 wuya.title("wuya") 5 wuya.geomet
原生js做一個簡單的進度條
-i 隨機數函數 borde setw bubuko 原生 html 進度條 add 用原生js做進度條,布局非常簡單,一個盒子裏放一個span標簽,讓它的寬度為0,並且轉成塊元素。 主要用定時器動態增加span的寬度,並且當它的寬度大於父級盒子的寬度的時候停止 效果如下:
Django2 + ORM 做一個簡單的登陸
name absolute 用戶 rfi 地址 date HERE 詳細信息 sqlit . ├── db.sqlite3 ├── manage.py ├── myormLogin │ ├── __init__.py │ ├── __pycache__ │ │
基於python使用qqbot接入qq做一個簡單的文字消息自動回復
備註 命令 ESS 消息響應 int 二維 參考 成功 nonetype qqbot是一個免費開源的基於smartqq的python插件,如果默認安裝有pip,則可以直接在命令行下執行:pip install qqbot安裝qqbot,安裝成功後可以在命令行輸入qqbot
Django----做一個簡單網頁的教程(適合初學者)
method elf learning 也有 rmi itl color ec2 路由 這篇文字適合剛學習Django的同學,如果比較熟的就不用看了。 以下都是講在windows上的部署情況; 準備: 1、python3.6 2、pycharm profession(專業版
如何使用CAD看圖軟體移動端對檢視的圖紙進行平移?
如何使用CAD看圖軟體移動端對檢視的圖紙進行平移?在電腦中的CAD看圖軟體中大多數的小夥伴們都知道如何對CAD圖紙進行移動,但是如何使用CAD看圖軟體移動端對檢視的圖紙進行平移?具體要怎麼來進行操作了,小夥伴們都知道嗎?有什麼好的辦法嗎?那下面小編就利用迅捷CAD看圖來教教大傢俱體操作方法,有興趣的朋友可以一
用 Vue 做一個簡單的購物app
有意思 應用程序 其中 ins com 簡單的 node.js 引入 大神 前言 最近在學習Vue的使用。看了官方文檔之後,感覺挺有意思的。於是著手做了一個簡單的購物app。這是我第一次在這個網站上寫分享,如有不當之處,請多多指教。 一整個項目寫下來,最大的感覺就是組件式開
用java做一個簡單的打字遊戲
Java也是可以做桌面程式的。只不過需要執行在裝有JDK的電腦環境上,所以應用不是很廣泛,但是用來提高自身的程式碼邏輯還是可以的!偶有一天看到金山的打字通,就想起何不做個簡單的打字遊戲用來練練手。於是就有了下文 首先建一個類MyTyping,只有main方法 執行main方法
ASP.NET MVC如何做一個簡單的非法登入攔截
摘要:做網站的時候,經常碰到這種問題,一個沒登入的使用者,卻可以通過localhost:23244/Main/Index的方式進入到網站的內部,檢視網站的資訊。我們知道,這是極不安全的,那麼如何對這樣的操作進行攔截呢,這裡記錄我學到的一個小小方法。 以下是我要記錄的正文部分: 開始講之前宣告一點,我目
原生js實現簡單移動端輪播圖
1、程式碼部分 分為四個檔案: slideshow.html slideshow.css base.js slideshow.js 1.1、slideshow.html <!DOCTYPE html> <html lang="en"&g
爬蟲教程」Python做一個簡單爬蟲,小白也能看懂的教程
俗話說“巧婦難為無米之炊”,除了傳統的資料來源,如歷史年鑑,實驗資料等,很難有更為簡便快捷的方式獲得資料,在目前網際網路的飛速發展寫,大量的資料可以通過網頁直接採集,“網路爬蟲”應運而生,本篇將會講解簡單的網路爬蟲編寫方法。 開發環境 每個人的開發環境各異,下面上是我的開發