当前位置:千赢国际官网 > 千赢网页手机版登入 > jQuery知识总结,20分钟轻松制作移动网站

jQuery知识总结,20分钟轻松制作移动网站

文章作者:千赢网页手机版登入 上传时间:2019-08-10

【视觉控】3D时钟,3d时钟

心心念念的新年过完了~却没念到年会,更没念到年终奖~哎,以任何理由不发年终奖的公司都是臭流氓~然,我们公司没有理由,压根儿就没提这事,哇卡卡卡卡!!!

======================== 华丽丽的跳水线===========================

年后第一天,公司人不多,闲来逛逛各个论坛,发现一个小特效,拿出来共享一下,顺便请大拿帮忙看看一个奇葩的BUG~

来人~上代码!

喳~

  1 <!DOCTYPE html>
  2 <html >
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Countdown Clock</title>
  6 <style>
  7 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
  8 /* Reset */
  9 * {
 10     margin: 0;
 11     padding: 0;
 12     box-sizing: border-box;
 13 }
 14 
 15 a {
 16     cursor: pointer;
 17     text-decoration: none;
 18     color: #ccc;
 19 }
 20 
 21 a:hover {
 22     color: #fff;
 23 }
 24 
 25 ul {
 26     list-style: none
 27 }
 28 
 29 .clearfix:before,
 30 .clearfix:after {
 31     content: " ";
 32     display: table;
 33 }
 34 
 35 .clearfix:after {
 36     clear: both;
 37 }
 38 
 39 .clearfix {
 40     *zoom: 1;
 41 }
 42 
 43 /* Main */
 44 
 45 html, body {
 46     min-height: 100%;
 47 }
 48 
 49 body {
 50     font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
 51     user-select: none;
 52     color: #888;
 53     text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
 54     background: rgb(150, 150, 150);
 55     background: -moz-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
 56     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(150, 150, 150, 1)), color-stop(100%, rgba(89, 89, 89, 1)));
 57     background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
 58     background: -o-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
 59     background: -ms-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
 60     background: radial-gradient(ellipse at center, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
 61     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#969696', endColorstr = '#595959', GradientType = 1);
 62 
 63 }
 64 
 65 .container {
 66     text-align: center;
 67     position: absolute;
 68     left: 50%;
 69     top: 50%;
 70     width: 140px;
 71     height: 90px;
 72     margin: -45px 0 0 -70px;
 73 }
 74 
 75 #social {
 76     text-align: center;
 77     position: absolute;
 78     bottom: 14%;
 79     width: 100%;
 80 }
 81 #social p{
 82   margin-bottom: 10px;
 83 }
 84 
 85 #social ul,
 86 #social li {
 87     display: inline-block;
 88 }
 89 
 90 /* Skeleton */
 91 
 92 ul.flip {
 93     position: relative;
 94     float: left;
 95     margin: 5px;
 96     width: 60px;
 97     height: 90px;
 98     font-size: 80px;
 99     font-weight: bold;
100     line-height: 87px;
101     border-radius: 6px;
102     box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
103 }
104 
105 ul.flip li {
106     z-index: 1;
107     position: absolute;
108     left: 0;
109     top: 0;
110     width: 100%;
111     height: 100%;
112 
113 }
114 
115 ul.flip li:first-child {
116     z-index: 2;
117 }
118 
119 ul.flip li a {
120     display: block;
121     height: 100%;
122     perspective: 200px;
123 }
124 
125 ul.flip li a div {
126     z-index: 1;
127     position: absolute;
128     left: 0;
129     width: 100%;
130     height: 50%;
131     overflow: hidden;
132 }
133 
134 ul.flip li a div .shadow {
135     position: absolute;
136     width: 100%;
137     height: 100%;
138     z-index: 2;
139 }
140 
141 ul.flip li a div.up {
142     transform-origin: 50% 100%;
143     top: 0;
144 }
145 
146 ul.flip li a div.up:after {
147   content: "";
148   position:absolute;
149   top:44px;
150   left:0;
151   z-index: 5;
152     width: 100%;
153   height: 3px;
154   background-color: rgba(0,0,0,.4);
155 }
156 
157 ul.flip li a div.down {
158     transform-origin: 50% 0%;
159     bottom: 0;
160 }
161 
162 ul.flip li a div div.inn {
163     position: absolute;
164     left: 0;
165     z-index: 1;
166     width: 100%;
167     height: 200%;
168     color: #ccc;
169     text-shadow: 0 1px 2px #000;
170     text-align: center;
171     background-color: #333;
172     border-radius: 6px;
173 }
174 
175 ul.flip li a div.up div.inn {
176     top: 0;
177 
178 }
179 
180 ul.flip li a div.down div.inn {
181     bottom: 0;
182 }
183 
184 /* PLAY */
185 
186 body.play ul li.before {
187     z-index: 3;
188 }
189 
190 body.play ul li.active {
191     animation: asd .5s .5s linear both;
192     z-index: 2;
193 }
194 
195 @keyframes asd {
196     0% {
197         z-index: 2;
198     }
199     5% {
200         z-index: 4;
201     }
202     100% {
203         z-index: 4;
204     }
205 }
206 
207 body.play ul li.active .down {
208     z-index: 2;
209     animation: turn .5s .5s linear both;
210 }
211 
212 @keyframes turn {
213     0% {
214         transform: rotateX(90deg);
215     }
216     100% {
217         transform: rotateX(0deg);
218     }
219 }
220 
221 body.play ul li.before .up {
222     z-index: 2;
223     animation: turn2 .5s linear both;
224 }
225 
226 @keyframes turn2 {
227     0% {
228         transform: rotateX(0deg);
229     }
230     100% {
231         transform: rotateX(-90deg);
232     }
233 }
234 
235 /* SHADOW */
236 
237 body.play ul li.before .up .shadow {
238     background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
239     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
240     background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
241     background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
242     background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
243     background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
244     animation: show .5s linear both;
245 }
246 
247 body.play ul li.active .up .shadow {
248     background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
249     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
250     background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
251     background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
252     background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
253     background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
254     animation: hide .5s .3s linear both;
255 }
256 
257 /*DOWN*/
258 
259 body.play ul li.before .down .shadow {
260     background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
261     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
262     background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
263     background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
264     background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
265     background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
266     animation: show .5s linear both;
267 }
268 
269 body.play ul li.active .down .shadow {
270     background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
271     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
272     background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
273     background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
274     background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
275     background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
276     animation: hide .5s .3s linear both;
277 }
278 
279 @keyframes show {
280     0% {
281         opacity: 0;
282     }
283     100% {
284         opacity: 1;
285     }
286 }
287 
288 @keyframes hide {
289     0% {
290         opacity: 1;
291     }
292     100% {
293         opacity: 0;
294     }
295 }
296 </style>
297 </head>
298 
299 <body>
300     
301 <div class="container">
302     <ul class="flip minutePlay">
303         <li>
304             <a href="#">
305                 <div class="up">
306                     <div class="shadow"></div>
307                     <div class="inn">0</div>
308                 </div>
309                 <div class="down">
310                     <div class="shadow"></div>
311                     <div class="inn">0</div>
312                 </div>
313             </a>
314         </li>
315           <li>
316             <a href="#">
317                 <div class="up">
318                     <div class="shadow"></div>
319                     <div class="inn">0</div>
320                 </div>
321                 <div class="down">
322                     <div class="shadow"></div>
323                     <div class="inn">0</div>
324                 </div>
325             </a>
326         </li>
327         <li>
328             <a href="#">
329                 <div class="up">
330                     <div class="shadow"></div>
331                     <div class="inn">1</div>
332                 </div>
333                 <div class="down">
334                     <div class="shadow"></div>
335                     <div class="inn">1</div>
336                 </div>
337             </a>
338         </li>
339         <li>
340             <a href="#">
341                 <div class="up">
342                     <div class="shadow"></div>
343                     <div class="inn">2</div>
344                 </div>
345                 <div class="down">
346                     <div class="shadow"></div>
347                     <div class="inn">2</div>
348                 </div>
349             </a>
350         </li>
351         <li>
352             <a href="#">
353                 <div class="up">
354                     <div class="shadow"></div>
355                     <div class="inn">3</div>
356                 </div>
357                 <div class="down">
358                     <div class="shadow"></div>
359                     <div class="inn">3</div>
360                 </div>
361             </a>
362         </li>
363         <li>
364             <a href="#">
365                 <div class="up">
366                     <div class="shadow"></div>
367                     <div class="inn">4</div>
368                 </div>
369                 <div class="down">
370                     <div class="shadow"></div>
371                     <div class="inn">4</div>
372                 </div>
373             </a>
374         </li>
375         <li>
376             <a href="#">
377                 <div class="up">
378                     <div class="shadow"></div>
379                     <div class="inn">5</div>
380                 </div>
381                 <div class="down">
382                     <div class="shadow"></div>
383                     <div class="inn">5</div>
384                 </div>
385             </a>
386         </li>
387     </ul>
388     <ul class="flip secondPlay">
389         <li>
390             <a href="#">
391                 <div class="up">
392                     <div class="shadow"></div>
393                     <div class="inn">0</div>
394                 </div>
395                 <div class="down">
396                     <div class="shadow"></div>
397                     <div class="inn">0</div>
398                 </div>
399             </a>
400         </li>
401         <li>
402             <a href="#">
403                 <div class="up">
404                     <div class="shadow"></div>
405                     <div class="inn">1</div>
406                 </div>
407                 <div class="down">
408                     <div class="shadow"></div>
409                     <div class="inn">1</div>
410                 </div>
411             </a>
412         </li>
413         <li>
414             <a href="#">
415                 <div class="up">
416                     <div class="shadow"></div>
417                     <div class="inn">2</div>
418                 </div>
419                 <div class="down">
420                     <div class="shadow"></div>
421                     <div class="inn">2</div>
422                 </div>
423             </a>
424         </li>
425         <li>
426             <a href="#">
427                 <div class="up">
428                     <div class="shadow"></div>
429                     <div class="inn">3</div>
430                 </div>
431                 <div class="down">
432                     <div class="shadow"></div>
433                     <div class="inn">3</div>
434                 </div>
435             </a>
436         </li>
437         <li>
438             <a href="#">
439                 <div class="up">
440                     <div class="shadow"></div>
441                     <div class="inn">4</div>
442                 </div>
443                 <div class="down">
444                     <div class="shadow"></div>
445                     <div class="inn">4</div>
446                 </div>
447             </a>
448         </li>
449         <li>
450             <a href="#">
451                 <div class="up">
452                     <div class="shadow"></div>
453                     <div class="inn">5</div>
454                 </div>
455                 <div class="down">
456                     <div class="shadow"></div>
457                     <div class="inn">5</div>
458                 </div>
459             </a>
460         </li>
461         <li>
462             <a href="#">
463                 <div class="up">
464                     <div class="shadow"></div>
465                     <div class="inn">6</div>
466                 </div>
467                 <div class="down">
468                     <div class="shadow"></div>
469                     <div class="inn">6</div>
470                 </div>
471             </a>
472         </li>
473         <li>
474             <a href="#">
475                 <div class="up">
476                     <div class="shadow"></div>
477                     <div class="inn">7</div>
478                 </div>
479                 <div class="down">
480                     <div class="shadow"></div>
481                     <div class="inn">7</div>
482                 </div>
483             </a>
484         </li>
485         <li>
486             <a href="#">
487                 <div class="up">
488                     <div class="shadow"></div>
489                     <div class="inn">8</div>
490                 </div>
491                 <div class="down">
492                     <div class="shadow"></div>
493                     <div class="inn">8</div>
494                 </div>
495             </a>
496         </li>
497         <li>
498             <a href="#">
499                 <div class="up">
500                     <div class="shadow"></div>
501                     <div class="inn">9</div>
502                 </div>
503                 <div class="down">
504                     <div class="shadow"></div>
505                     <div class="inn">9</div>
506                 </div>
507             </a>
508         </li>
509     </ul>
510 </div>
511 </body>
512 </html>
513 <script type="text/javascript" src="jq.js"></script>
514 <script type="text/javascript">
515 setInterval(function () {
516     secondPlay()
517 }, 1000);
518 
519 
520 setInterval(function () {
521     minutePlay()
522 }, 10000);
523 
524 
525 function secondPlay() {
526     $("body").removeClass("play");
527     var aa = $("ul.secondPlay li.active");
528 
529     if (aa.html() == undefined) {
530         aa = $("ul.secondPlay li").eq(0);
531         aa.addClass("before")
532             .removeClass("active")
533             .next("li")
534             .addClass("active")
535             .closest("body")
536             .addClass("play");
537 
538     }
539     else if (aa.is(":last-child")) {
540         $("ul.secondPlay li").removeClass("before");
541         aa.addClass("before").removeClass("active");
542         aa = $("ul.secondPlay li").eq(0);
543         aa.addClass("active")
544             .closest("body")
545             .addClass("play");
546     }
547     else {
548         $("ul.secondPlay li").removeClass("before");
549         aa.addClass("before")
550             .removeClass("active")
551             .next("li")
552             .addClass("active")
553             .closest("body")
554             .addClass("play");
555     }
556 
557 }
558 
559 function minutePlay() {
560     $("body").removeClass("play");
561     var aa = $("ul.minutePlay li.active");
562 
563     if (aa.html() == undefined) {
564         aa = $("ul.minutePlay li").eq(0);
565         aa.addClass("before")
566             .removeClass("active")
567             .next("li")
568             .addClass("active")
569             .closest("body")
570             .addClass("play");
571 
572     }
573     else if (aa.is(":last-child")) {
574         $("ul.minutePlay li").removeClass("before");
575         aa.addClass("before").removeClass("active");
576         aa = $("ul.minutePlay li").eq(0);
577         aa.addClass("active")
578             .closest("body")
579             .addClass("play");
580     }
581     else {
582         $("ul.minutePlay li").removeClass("before");
583         aa.addClass("before")
584             .removeClass("active")
585             .next("li")
586             .addClass("active")
587             .closest("body")
588             .addClass("play");
589     }
590 
591 }
592 </script>

以上源代码经测,在chrome和Firefox下均可正常运行,显示结果如下: 

图片 1

可是在Safari下,显示如下:

图片 2

IE没有,暂时未测。

===========================================================

自我分析感觉问题出在了一些css3样式上,所以将所以需要添加前缀的属性都添加了-webkit-,-o-,-ms-,-moz-等前缀(测试代码有加,上边附的代码保留的源码),依旧不起作用。

话说,chrome没有问题的话,Safari不应该是同样正常显示的吗?

求赐教~~~~

 

 

============================================================

解决方案:

prefixfree.min.js

 

心心念念的新年过完了~却没念到年会,更没念到年终奖~哎,以任何理由不发年终奖的公司都是臭流氓~然,我们...

20分钟轻松制作移动网站,20分钟轻松制作移动

最近关于移动网站开发或APP轻应用的内容越来越多了,,有一些好的方法可以快速开发,但不系统,这里推荐一本书吧。

  PhoneGap的目的是用来快速开发移动跨平台 APP,它基于 HTML 5,支持市面上流行的移动设备,《构建跨平台APP:HTML 5 PhoneGap移动应用实战》的特色就是快速学习如何利用 HTML 5和 PhoneGap开发移动 APP。 《构建跨平台APP:HTML 5 PhoneGap移动应用实战》分为三篇,第一篇介绍 HTML 5为移动页面设计的一些新元素,包含移动开发的大背景、移动布局、地理位置、Web存储、多媒体等等;第二篇介绍 PhondeGap辅助 HTML 5开发应用的一些 API,包含事件处理、信息处理、加速度、地理位置、指南针、本地存储和多媒体等等;最后一篇通过两个实例,介绍了 HTML 5 PhoneGap开发移动 APP的两个项目开发流程和实现代码。 《构建跨平台APP:HTML 5 PhoneGap移动应用实战》适合有一定 HTML CSS JavaScript网页开发基础的人员,可作为培训教材使用。

 

图片 3

最近关于移动网站开发或APP轻应用的内容越来越多了,,有一些好的方法可以快速开发,但...

[转]jQuery知识总结,jquery知识总结

jQuery一直都在用,但都是在用时查查手册,并没有系统的学过,最近组内做jQuery交流,花了几天时间系统了学习了下,做了个PPT,本文是根据PPT总结而来,有些地方做了些补充。希望对jQuery初学者有些帮助。

jQuery简介

简介

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。 jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多javascript高手加入,现在由Dave Methvin率领团队进行开发。如今, jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery 。【摘自百度百科】

下载地址

源码地址

可以通过 git clone git://github.com/jquery/jquery.git 来获取源码。

在线文档

使用jQuery

使用jQuery首先需要在页面中进行引用,如下:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>

使用的代码如下:

$(document).ready(function () {
    $("#div1").html("hello world");
});

$(function () {
    $("#btnOK").bind("click", function () { 

    });
});

上面的代码相当于window.onload,不过跟window.onload还是有一些区别,后面会以表格的形式来展现他们的区别。在jQuery中到处可以见到$符号,这是jQuery里的一种简写,$("#btnOK")和jQuery("#btnOK")是等价的。

window.onload和$(document).ready()的区别

 

window.onload

$(document).ready()

执行时间

网页所有内容加载完后执行

DOM结构加载完后就执行,效率更高

编写个数

1个

多个,多个的执行顺序取决于函数的顺序以及引用文件的顺序

是否支持简写

不支持

简写形式为:$(function(){});

DOM对象和jQuery对象转换

获取DOM对象代码如下:

//获取DOM对象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

获取jQuery对象代码如下:

//获取jQuery对象
var div1 = $("#div1");
div1.html("oec2003");

jQuery对象转DOM对象

//因为ajQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式
var $div1 = $("#div1"); //jQuery对象
var div1 = $div1[0]; //转换为了DOM对象
var div2 = $div1.get(0); //和上面一行效果一样
div1.innerHTML = "oec2003";

DOM对象转jQuery对象

//DOM对象转jQuery只需用$包装即可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //转换为了jQuery对象
$div1.html("oec2003");

解决冲突

有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景,就有可能会出现$冲突的问题,冲突的解决分两种情况:

1、jQuery库在其他库之后引用,如下所示:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有对$重新定义,代码如下:

function $(id) {

    return document.getElementById(id);
}

下面是在jQuery中解决冲突的代码,有四种方式:

//方式1
jQuery.noConflict(); //将$控制权移交出去,以前使用$的地方都改用jQuery
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定义快捷方式
$j(document).ready(function () {
    alert($j("#span1").html());
});

window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函数内部继续使用$
jQuery(function ($) {
    alert($("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函数内部继续使用$另一种方式
(function ($) {
    $(function(){
        alert($("#span1").html());
    });
})(jQuery);
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

2、jQuery库在其他库之前使用

//如果先引用jQuery脚本,可以不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:jQuery知识总结,20分钟轻松制作移动网站

关键词: 千赢国际官网 千赢国际qy966