一、項目背景】
jQuery是當前很流行的一個JavaScript框架,使用類似于CSS的選擇器,可以方便的操作HTML元素,擁有很好的可擴展性,擁有不少jQuery插件,也可對個方面進行插件開發。jQuery可以快速找到文檔中的html元素,并對其進行操作,如隱藏、顯示、改變樣式......
【二、項目準備】
1. 下載 jQuery Mobile
如果你想將 jQuery Mobile 放于你的主機中,你可以從下面這個網站下載該文件。
jQuerymobile.com
2. 在你的網頁中添加 jQuery Mobile
你可以通過以下幾種方式將jQuery Mobile添加到你的網頁中:
3. 從 CDN 中加載 jQuery Mobile
<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 -->
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<!-- 引入 jQuery Mobile 庫 -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
【三、項目實施】
1. body里面寫入以下代碼,(img標簽的src屬性導入自己喜歡的圖片,設置圖片的樣式)。
<div data-role="page">
<a href="#popup_1" data-rel="popup" data-position-to="window">
<img src="images/p1.jpg" style="width:49%">
</a>
<a href="#popup_2" data-rel="popup" data-position-to="window">
<img src="images/p2.jpg" style="width:49%">
</a>
<a href="#popup_3" data-rel="popup" data-position-to="window">
<img src="images/p3.jpg" style="width:49%">
</a>
<a href="#popup_4" data-rel="popup" data-position-to="window">
<img src="images/p4.jpg" style="width:49%">
</a>
<a href="#popup_5" data-rel="popup" data-position-to="window">
<img src="images/p5.jpg" style="width:49%">
</a>
<a href="#popup_6" data-rel="popup" data-position-to="window">
<img src="images/p6.jpg" style="width:49%">
</a>
2. 給圖片添圖標。
<div data-role="popup" id="popup_2">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="images/p2.jpg" style="max-height:512px;" alt="pic2">
</div>
<div data-role="popup" id="popup_3">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="images/p3.jpg" style="max-height:512px;" alt="pic3">
</div>
<div data-role="popup" id="popup_4">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="images/p4.jpg" style="max-height:512px;" alt="pic4">
</div>
<div data-role="popup" id="popup_5">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="images/p5.jpg" style="max-height:512px;" alt="pic5">
</div>
提示:jQuery Mobile 中的按鈕會自動獲得樣式,這增強了他們在移動設備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來創建頁面之間的鏈接,而 <input> 或 <button> 元素用于表單提交。
【四、效果展示】
1. 下載一個叫Opera Mobile的軟件。
Opera Mobile emulator是一款APP模擬器,專門用來測試APP項目。不過這個需要進行安裝,這個模擬器可以根據手機屏幕大小進行模擬測試。
2. 百度搜索opera mobile,選擇第一個網址。
3. 安裝教程可以直接百度,這里不再贅述。
4. 安裝完成后把我們的頁面拖進去就可以了。(下面是界面效果圖)
5. 效果圖如下圖所示。
6. 點擊其中一張圖片,會放大顯示,效果圖如下圖所示。
【五、總結】
1. 本文章就jQuery Mobile在應用中出現的難點和重點,做出了相對于的解決方案。
2. 使更多的人去了解jQuery Mobile。
3. 歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。
4. 如果需要本文源碼,請在公眾號后臺回復“設計相冊”四個字獲取。
看完本文有收獲?請轉發分享給更多的人
IT共享之家
想學習更多Python網絡爬蟲與數據挖掘知識,可前往專業網站:http://pdcfighting.com/
天學習了平面動畫,今天來3D動畫:
css3的強大之處就在于它可以用很少量的標簽,來實現一些要用到插件或者js,jq很多代碼才能實現的復雜功能。隨著css3版本的推進,各瀏覽器的兼容性也會越來越好,開發會很容易。
實現上圖的關鍵點在于,如何布局不了解css3的可能會說要定位,其實不然,我們只需要transform的rotate和translate即可輕松實現旋轉位移.至于圖片了可以用img也可以直接背景圖。下面是我的頁面結構和css樣式
<style>
*{margin:0; padding:0; list-style: none;}
div{
width: 105px;
height: 150px;
margin:100px auto;
-webkit-perspective: 1000;
-webkit-perspective-origin: center center;
}
ul{
width: 105px;
height: 150px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateX(-16deg) rotateY(0deg) rotateZ(0deg);
-webkit-animation: ;
}
@-webkit-keyframes run{
from{ }
to{ }
}
ul li{width: 105px; height: 150px; position: absolute; -webkit-background-size:100% 100%;}
ul li:nth-child(1){
background-image: url(images/01.jpg);
-webkit-transform: translateZ(200px);
}
ul li:nth-child(2){
background-image: url(images/02.jpg);
-webkit-transform:rotateY(30deg) translateZ(200px);
}
ul li:nth-child(3){
background-image: url(images/03.jpg);
-webkit-transform:rotateY(60deg) translateZ(200px);
}
ul li:nth-child(4){
background-image: url(images/04.jpg);
-webkit-transform:rotateY(90deg) translateZ(200px);
}
ul li:nth-child(5){
background-image: url(images/05.jpg);
-webkit-transform:rotateY(120deg) translateZ(200px);
}
ul li:nth-child(6){
background-image: url(images/06.jpg);
-webkit-transform:rotateY(150deg) translateZ(200px);
}
ul li:nth-child(7){
background-image: url(images/07.jpg);
-webkit-transform:rotateY(180deg) translateZ(200px);
}
ul li:nth-child(8){
background-image: url(images/08.jpg);
-webkit-transform:rotateY(210deg) translateZ(200px);
}
ul li:nth-child(9){
background-image: url(images/09.jpg);
-webkit-transform:rotateY(240deg) translateZ(200px);
}
ul li:nth-child(10){
background-image: url(images/10.jpg);
-webkit-transform:rotateY(270deg) translateZ(200px);
}
ul li:nth-child(11){
background-image: url(images/11.jpg);
-webkit-transform:rotateY(300deg) translateZ(200px);
}
ul li:nth-child(12){
background-image: url(images/12.jpg);
-webkit-transform:rotateY(330deg) translateZ(200px);
}
</style>
結構是div抱著ul和li有多少圖片就有多少個li(這里就不展示了)
只有這個相冊就可以旋轉了么,當然不會,各位還需要在上文@-webkit-keyframes處補全animation動畫即可,animation動畫在上篇《純css實現無縫滾動》中又詳細代碼 拿過來即可
注本頭條號,專注做前端
今天要分享的是一款特別的 html5/css3 焦點圖效果,不依賴jquery,全程JS 手寫,代碼量不大,百行左右,它的特別之處在于 可以多維度的切換
誰說程序員沒有情調? 拿這個去給女票定制個專屬相冊吧
//
*請認真填寫需求信息,我們會在24小時內與您取得聯系。