һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

ֻվͼƬֲ̳

[]
24050 2013-3-25 09:11:14
| ʾȫ¥
1F
DzSlipJsʵֵģԼ㿪ʼBUG
slipjs:http://www.slipjs.com/
1ȿЧͼ

http://www.slipjs.com/demo/img.html ֻʣ
3ֻ֪ôĵַUCQQɨά룺

4дHTMLCSS룺

  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4.     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  5.     <meta name="format-detection" content="telephone=no" />
  6.     <title>SlipJsʾ</title>
  7.     <link rel="stylesheet" href=""/>
  8.     <style type="text/css">
  9.         *{
  10.             padding:0px;
  11.             margin:0px;
  12.         }
  13.         body{
  14.             background-color:#cbd2d8;
  15.         }
  16.         ul,li{
  17.             list-style-type: none;            
  18.         }
  19.         header{
  20.             width: 100%;
  21.             height: 40px;
  22.             background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
  23.             text-shadow: 1px 1px rgba(0, 0, 0, .2);
  24.             line-height: 40px;
  25.             text-align: center;
  26.             color: #F3F3F3;
  27.             font-size: 19px;
  28.             font-weight: bold;
  29.             font-family: helvetica;
  30.         }
  31.         #change_screen_div{
  32.             position:relative;
  33.             width:320px;
  34.             height:188px;
  35.             overflow:hidden;
  36.             margin:auto;
  37.             border-top: 1px solid #3b3e41;
  38.         }
  39.         #change_screen_ul{
  40.             width:960px;
  41.             height:100%;
  42.             position: absolute;
  43.         }
  44.         #change_screen_ul img{
  45.             width:320px;
  46.             display:block;
  47.             height:100%;
  48.         }
  49.         #change_screen_ul li{
  50.             float:left;
  51.         }
  52.         .slider_status{
  53.             width:320px;
  54.             height:3px;
  55.             background-color: rgba(51, 51, 51, 0.5);
  56.             position:absolute;
  57.             bottom:0px;
  58.         }
  59.         #slider_status_span{
  60.             display:block;
  61.             width:107px;
  62.             height:100%;
  63.             background-color:#7a0103;
  64.             -webkit-transition: 300ms;
  65.         }
  66.         .note{
  67.             color:#4c566c;
  68.             text-shadow: 1px 1px white;
  69.             text-align:center;
  70.             width:80%;
  71.             margin:10px auto 20px; auto;
  72.             font-size:15px;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77. <header>ͼƬֻ</header>
  78. <div>
  79. <div id="change_screen_div">
  80.     <ul id="change_screen_ul">
  81.          <li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
  82.          <li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
  83.          <li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
  84.     </ul>
  85.     <div class="slider_status">
  86.         <span id="slider_status_span"></span>
  87.     </div>
  88. </div>
  89. <div class="note">ʹ SlipJs ֻ輸м򵥵ĴͿʵ˾Ч</div>
  90. </div>
  91. </body>
ƴ
5Ȼjs룺
  1. <script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
  2. <script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
  3. <script>
  4. // ܻῴai.jsjavascriptļļslip.jsκϵai.jsֻһЩõĺ磺ai.iЩҲзdzϸע͡
  5. document.addEventListener('DOMContentLoaded', function(){
  6.    
  7.     ai.hideUrl();
  8.     var change_screen_ul = ai.i("change_screen_ul"),
  9.         slip_status_span = ai.i("slider_status_span");
  10.      
  11.     function changeScreenEndFun() {
  12.         slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';   
  13.     }
  14.    
  15.     //Ĵ
  16.     slip('page',change_screen_ul,{
  17.     change_time: 5000,
  18.             num: 3,
  19.          endFun: changeScreenEndFun,
  20.        infinite: true
  21.     });
  22.     //Ĵ
  23.      
  24. }, false);
  25. </script>
ƴ

6Ϊ˷ʾǰѴϲһҳУͱˣ
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.     <meta name="format-detection" content="telephone=no" />
  7.     <title>SlipJsʾ</title>
  8.     <link rel="stylesheet" href=""/>
  9.     <style type="text/css">
  10.         *{
  11.             padding:0px;
  12.             margin:0px;
  13.         }
  14.         body{
  15.             background-color:#cbd2d8;
  16.         }
  17.         ul,li{
  18.             list-style-type: none;            
  19.         }
  20.         header{
  21.             width: 100%;
  22.             height: 40px;
  23.             background: -webkit-gradient(linear,left top,left bottom,from(#6f85a2),to(#6f85a2));
  24.             text-shadow: 1px 1px rgba(0, 0, 0, .2);
  25.             line-height: 40px;
  26.             text-align: center;
  27.             color: #F3F3F3;
  28.             font-size: 19px;
  29.             font-weight: bold;
  30.             font-family: helvetica;
  31.         }
  32.         #change_screen_div{
  33.             position:relative;
  34.             width:320px;
  35.             height:188px;
  36.             overflow:hidden;
  37.             margin:auto;
  38.             border-top: 1px solid #3b3e41;
  39.         }
  40.         #change_screen_ul{
  41.             width:960px;
  42.             height:100%;
  43.             position: absolute;
  44.         }
  45.         #change_screen_ul img{
  46.             width:320px;
  47.             display:block;
  48.             height:100%;
  49.         }
  50.         #change_screen_ul li{
  51.             float:left;
  52.         }
  53.         .slider_status{
  54.             width:320px;
  55.             height:3px;
  56.             background-color: rgba(51, 51, 51, 0.5);
  57.             position:absolute;
  58.             bottom:0px;
  59.         }
  60.         #slider_status_span{
  61.             display:block;
  62.             width:107px;
  63.             height:100%;
  64.             background-color:#7a0103;
  65.             -webkit-transition: 300ms;
  66.         }
  67.         .note{
  68.             color:#4c566c;
  69.             text-shadow: 1px 1px white;
  70.             text-align:center;
  71.             width:80%;
  72.             margin:10px auto 20px; auto;
  73.             font-size:15px;
  74.         }
  75.     </style>
  76. </head>
  77. <body>
  78. <header>ͼƬֻ</header>
  79. <div>
  80. <div id="change_screen_div">
  81.     <ul id="change_screen_ul">
  82.          <li><img src="http://www.slipjs.com/demo/img/change01.jpg"></li>
  83.          <li><img src="http://www.slipjs.com/demo/img/change02.jpg"></li>
  84.          <li><img src="http://www.slipjs.com/demo/img/change03.jpg"></li>
  85.     </ul>
  86.     <div class="slider_status">
  87.         <span id="slider_status_span"></span>
  88.     </div>
  89. </div>
  90. <div class="note">ʹ SlipJs ֻ輸м򵥵ĴͿʵ˾Ч</div>
  91. </div>

  92. </body>
  93. <script src="http://www.slipjs.com/3.0.1/ai.js" type="text/javascript"></script>
  94. <script src="http://www.slipjs.com/3.0.1/slip-min.js" type="text/javascript"></script>
  95. <script>
  96. // ܻῴai.jsjavascriptļļslip.jsκϵai.jsֻһЩõĺ磺ai.iЩҲзdzϸע͡
  97. document.addEventListener('DOMContentLoaded', function(){
  98.    
  99.     ai.hideUrl();
  100.     var change_screen_ul = ai.i("change_screen_ul"),
  101.         slip_status_span = ai.i("slider_status_span");
  102.      
  103.     function changeScreenEndFun() {
  104.         slip_status_span.style['webkitTransform'] = 'translateX('+this.page * 320/3+'px) translateZ(0)';   
  105.     }
  106.    
  107.     //Ĵ
  108.     slip('page',change_screen_ul,{
  109.     change_time: 5000,
  110.             num: 3,
  111.          endFun: changeScreenEndFun,
  112.        infinite: true
  113.     });
  114.     //Ĵ
  115.      
  116. }, false);
  117. </script>
  118. </html>
ƴ
7ɣͿֻһˣͼƬǴŮɡ


̳, ֻ

аԴ

Ҫ ¼ ſػ鿴ûʺţע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-7-21 08:23

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б