Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产人妖chinats,中文一级毛片,好男人社区www的视频免费 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          手把手教你用jQuery Mobile做相冊(cè)
          
        
           
          
	
	
          
		手把手教你用jQuery Mobile做相冊(cè)
          
                        
          一、項(xiàng)目背景】
           jQuery是當(dāng)前很流行的一個(gè)JavaScript框架，使用類似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴(kuò)展性，擁有不少jQuery插件，也可對(duì)個(gè)方面進(jìn)行插件開發(fā)。jQuery可以快速找到文檔中的html元素，并對(duì)其進(jìn)行操作，如隱藏、顯示、改變樣式......

          【二、項(xiàng)目準(zhǔn)備】
          1. 下載 jQuery Mobile
          如果你想將 jQuery Mobile 放于你的主機(jī)中,你可以從下面這個(gè)網(wǎng)站下載該文件。
          jQuerymobile.com

           2. 在你的網(wǎng)頁(yè)中添加 jQuery Mobile
           你可以通過(guò)以下幾種方式將jQuery Mobile添加到你的網(wǎng)頁(yè)中：
          • 從 CDN 中加載 jQuery Mobile (推薦)。
          • 從jQuerymobile.com 下載 jQuery Mobile庫(kù)。
           
           3. 從 CDN 中加載 jQuery Mobile
          <!-- meta使用viewport以確保頁(yè)面可自由縮放 -->
<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 庫(kù) -->
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>

<!-- 引入 jQuery Mobile 庫(kù) -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

          【三、項(xiàng)目實(shí)施】
           1. body里面寫入以下代碼，（img標(biāo)簽的src屬性導(dǎo)入自己喜歡的圖片，設(shè)置圖片的樣式）。
          <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. 給圖片添圖標(biāo)。 
          <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 中的按鈕會(huì)自動(dòng)獲得樣式，這增強(qiáng)了他們?cè)谝苿?dòng)設(shè)備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來(lái)創(chuàng)建頁(yè)面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。

          【四、效果展示】
           1. 下載一個(gè)叫Opera Mobile的軟件。
           Opera Mobile emulator是一款A(yù)PP模擬器，專門用來(lái)測(cè)試APP項(xiàng)目。不過(guò)這個(gè)需要進(jìn)行安裝，這個(gè)模擬器可以根據(jù)手機(jī)屏幕大小進(jìn)行模擬測(cè)試。
           2. 百度搜索opera mobile，選擇第一個(gè)網(wǎng)址。
           
           3. 安裝教程可以直接百度，這里不再贅述。
           4. 安裝完成后把我們的頁(yè)面拖進(jìn)去就可以了。（下面是界面效果圖）

           5. 效果圖如下圖所示。

           6. 點(diǎn)擊其中一張圖片，會(huì)放大顯示，效果圖如下圖所示。
          【五、總結(jié)】
           1. 本文章就jQuery Mobile在應(yīng)用中出現(xiàn)的難點(diǎn)和重點(diǎn)，做出了相對(duì)于的解決方案。
           2. 使更多的人去了解jQuery Mobile。
           3. 歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
           4. 如果需要本文源碼，請(qǐng)?jiān)诠娞?hào)后臺(tái)回復(fù)“設(shè)計(jì)相冊(cè)”四個(gè)字獲取。

          看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人
          IT共享之家
          想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/
          天學(xué)習(xí)了平面動(dòng)畫，今天來(lái)3D動(dòng)畫：
          css3的強(qiáng)大之處就在于它可以用很少量的標(biāo)簽，來(lái)實(shí)現(xiàn)一些要用到插件或者js，jq很多代碼才能實(shí)現(xiàn)的復(fù)雜功能。隨著css3版本的推進(jìn)，各瀏覽器的兼容性也會(huì)越來(lái)越好，開發(fā)會(huì)很容易。
          實(shí)現(xiàn)上圖的關(guān)鍵點(diǎn)在于，如何布局不了解css3的可能會(huì)說(shuō)要定位，其實(shí)不然，我們只需要transform的rotate和translate即可輕松實(shí)現(xiàn)旋轉(zhuǎn)位移.至于圖片了可以用img也可以直接背景圖。下面是我的頁(yè)面結(jié)構(gòu)和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>
          結(jié)構(gòu)是div抱著ul和li有多少圖片就有多少個(gè)li（這里就不展示了）
          只有這個(gè)相冊(cè)就可以旋轉(zhuǎn)了么，當(dāng)然不會(huì)，各位還需要在上文@-webkit-keyframes處補(bǔ)全animation動(dòng)畫即可，animation動(dòng)畫在上篇《純css實(shí)現(xiàn)無(wú)縫滾動(dòng)》中又詳細(xì)代碼 拿過(guò)來(lái)即可
          注本頭條號(hào)，專注做前端
          今天要分享的是一款特別的 html5/css3 焦點(diǎn)圖效果，不依賴jquery，全程JS 手寫，代碼量不大，百行左右，它的特別之處在于 可以多維度的切換
          誰(shuí)說(shuō)程序員沒(méi)有情調(diào)？ 拿這個(gè)去給女票定制個(gè)專屬相冊(cè)吧 
          //
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
色狠狠AV一区二区三区|
一区二区国产精品|
91一区二区视频|
国产精品毛片a∨一区二区三区|
亚洲视频一区二区在线观看|
中文字幕在线播放一区|
在线电影一区二区|
日本精品无码一区二区三区久久久|
波多野结衣免费一区视频|
亚洲一区二区三区无码影院|
国产高清在线精品一区|
国产午夜精品一区二区|
一区二区三区视频观看|
日韩社区一区二区三区|
成人一区二区免费视频|
国产福利电影一区二区三区久久久久成人精品综合
|
日本不卡一区二区三区视频|
一区视频免费观看|
免费观看日本污污ww网站一区|
一区二区三区91|
一区二区免费国产在线观看|
一区视频免费观看|
曰韩精品无码一区二区三区|
国产凹凸在线一区二区|
国产区精品一区二区不卡中文|
亚洲线精品一区二区三区|
国产一区二区三区不卡AV|
国99精品无码一区二区三区|
色一乱一伦一图一区二区精品|
日韩在线视频一区|
国产精品一区二区AV麻豆|
国产伦精品一区三区视频|
精品91一区二区三区|
相泽亚洲一区中文字幕|
国产一区二区福利|
久久无码AV一区二区三区|
成人精品一区二区激情|
一区二区三区四区在线观看视频|
一区二区在线视频免费观看|
国产精品特级毛片一区二区三区
|
精品不卡一区二区|