jquery+css時(shí)鐘.doc

簡(jiǎn)介今天我們將要制作一個(gè)豐富多彩的jQuery和CSS的時(shí)鐘，這個(gè)時(shí)鐘將使用tzineClock插件來(lái)吧，下載演示文件，并繼續(xù)學(xué)習(xí)該教程吧。XHTML像往常一樣，我們開始于XHTML標(biāo)記。有所不同的是，該時(shí)鐘的XHTML不是寫在demo.html里，而是寫成JavaScript，然后由jQuery動(dòng)態(tài)載入到頁(yè)面中（當(dāng)然，我們也得至少有一個(gè)容器div在html頁(yè)面內(nèi)，用于插入該時(shí)鐘）。這中做法可以節(jié)省我們手動(dòng)鍵入類似的代碼塊（例如：時(shí)鐘中有三個(gè)類似的代碼塊：小時(shí)，分鐘，秒）。讓我們看一看jQuery要插入XHTML的外觀：jquery.tzineClock.jsdiv class=green clock此代碼是包含在jquery.tzineClock / jquery.tzineClock.js。他被調(diào)用三次 小時(shí)，分，秒。這些都是后來(lái)的動(dòng)畫和每一秒的運(yùn)動(dòng)（您等會(huì)兒就能看到這一點(diǎn)）。在產(chǎn)生代碼的過(guò)程中，有3個(gè)類被分配在的最頂層容器 綠色，藍(lán)色和橙色。只要通過(guò)指定的這些類的參數(shù)，我們就能改變這些層的顏色。讓我們繼續(xù)下一個(gè)步驟。CSS首先，我們必須在在網(wǎng)頁(yè)的頭部分包含以下文件：demo.html以上的代碼將styles.css的和jquery.tzineClock.css插入到頁(yè)面中。styles.css風(fēng)格化了demo頁(yè)面，jquery.tzineClock.css用于豐富時(shí)鐘的表盤（這也是插件的一部分）?，F(xiàn)在，我們可以看一看在CSS的規(guī)則。styles.cssbody,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label/* Simple page reset */margin:0;padding:0;body/* Setting default text color, background and a font stack */color:#dddddd;font-size:13px;background: #302b23;font-family:Arial, Helvetica, sans-serif;#fancyClockmargin:40px auto;height:200px;border:1px solid #111111;width:600px;這些幾行都是必須的，他用于制作演示頁(yè)面的風(fēng)格。在CSS代碼中，我們首先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的CSS重置，這將確保該網(wǎng)頁(yè)上的元素在不同的瀏覽器上外觀一致。之后，我們定義的網(wǎng)頁(yè)正文的風(fēng)格，最后是fancyClock分區(qū)，我們將在稍后插入三個(gè)表盤。jquery.tzineClock.css.clock/* The .clock div. Created dynamically by jQuery */background-color:#252525;height:200px;width:200px;position:relative;overflow:hidden;float:left;.clock .rotate/* There are two .rotate divs - one for each half of the background */position:absolute;width:200px;height:200px;top:0;left:0;.rotate.rightdisplay:none;z-index:11;.clock .bg, .clock .frontwidth:100px;height:200px;background-color:#252525;position:absolute;top:0;.clock .display/* Holds the number of seconds, minutes or hours respectfully */position:absolute;width:200px;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;z-index:20;color:#F5F5F5;font-size:60px;text-align:center;top:65px;left:0;/* CSS3 text shadow: */text-shadow:4px 4px 5px #333333;/* The left part of the background: */.clock .bg.left left:0; /* Individual styles for each color: */.orange .bg.left background:url(img/bg_orange.png) no-repeat left top; .green .bg.left background:url(img/bg_green.png) no-repeat left top; .blue .bg.leftbackground:url(img/bg_blue.png) no-repeat left top; /* The right part of the background: */.clock .bg.right left:100px; .orange .bg.right background:url(img/bg_orange.png) no-repeat right top; .green .bg.right background:url(img/bg_green.png) no-repeat right top; .blue .bg.right background:url(img/bg_blue.png) no-repeat right top; .clock .front.leftleft:0;z-index:10;jquery.tzineClock.css是jquery.tzineClock.js插件和一起的，它的作用是定義表盤的風(fēng)格。有趣的是每個(gè)表盤運(yùn)行使用獨(dú)立的顏色規(guī)則，這也正是我們?cè)诓襟E一中提到的。你可以通過(guò)以下圖片說(shuō)明來(lái)進(jìn)一步了解該動(dòng)畫插圖：jQueryJavaScript的插件使得代碼可以很容易被重復(fù)使用，并在同一時(shí)間，jQuery能使我們感受到它選擇器和方法的強(qiáng)大。為了能夠使用jQuery庫(kù)，我們首先需要包含一些腳本：demo.html第一個(gè)文件是jQuery本身，來(lái)自谷歌的CDN，后面2個(gè)分別是時(shí)鐘插件和用于運(yùn)行演示的script.js文件。script.js$(document).ready(function()/* This code is executed after the DOM has been completely loaded */$(#fancyClock).tzineClock(););如果您曾經(jīng)學(xué)習(xí)過(guò)我們以前的一些教程，你可能會(huì)比較期待第50行以上的代碼，但這次我們的腳本文件只包含一行代碼 用于調(diào)用我們的插件。這使得它非常容易被包括到現(xiàn)有的站點(diǎn)（這是jQuery的插件擺在首位的目的）。讓我們更深入地了解一下這個(gè)小插件：jquery.tzineClock.js Part 1(function($)/ A global object used by the functions of the plug-in:var gVars = ;/ Extending the jQuery core:$.fn.tzineClock = function(opts)/ this contains the elements that were selected when calling the plugin: $(elements).tzineClock();/ If the selector returned more than one element, we use the first one:var container = this.eq(0);if(!container)tryconsole.log(Invalid selector!); catch(e)return false;if(!opts) opts = ;var defaults = /* Additional options will be added in future versions of the plugin. */;/* Merging the provided options with the default ones (will be used in future versions of the plugin): */$.each(defaults,function(k,v)optsk = optsk | defaultsk;);/ Calling the setUp function and passing the container,/ will be available to the setUp function as this:setUp.call(container);return this;function setUp()/ The colors of the dials:var colors = orange,blue,green;var tmp;for(var i=0;i3;i+)/ Creating a new element and setting the color as a class name:tmp = $().attr(class,colorsi+ clock).html(+);/ Appending to the fancyClock container:$(this).append(tmp);/ Assigning some of the elements as variables for speed:tmp.rotateLeft = tmp.find(.rotate.left);tmp.rotateRight = tmp.find(.rotate.right);tmp.display = tmp.find(.display);/ Adding the dial as a global variable. Will be available as gVars.colorNamegVarscolorsi = tmp;/ Setting up a interval, executed every 1000 milliseconds:setInterval(function()var currentTime = new Date();var h = currentTime.getHours();var m = currentTime.getMinutes();var s = currentTime.getSeconds();animation(gVars.green, s, 60);animation(gVars.blue, m, 60);animation(gVars.orange, h, 24);,1000);做好一個(gè)jQuery插件，可以歸結(jié)為通過(guò)jQuery.fn方法確定一個(gè)自定義函數(shù)。這樣，你的jQuery函數(shù)是可以被用在任何元素上。例如，在script.js，我們選擇的div的id是fancyClock的寬度和使用tzineClock（）方法：$（fancyClock）.tzineClock（）;我們選擇的元素是后來(lái)傳遞給tzineClock的功能，并通過(guò)了“this”屬性被使用。jquery.tzineClock.js Part 2function animation(clock, current, total)/ Calculating the current angle:var angle = (360/total)*(current+1);var element;if(current=0)/ Hiding the right half of the background:clock.rotateRight.hide();/ Resetting the rotation of the left part:rotateElement(clock.rotateLeft,0);if(angle=180)/ The left part is rotated, and the right is currently hidden:element = clock.rotateLeft;else/ The first part of the rotation has completed, so we start rotating the right part:clock.rotateRight.show();clock.rotateLeft.show();rotateElement(clock.rotateLeft,180);element = clock.rotateRight;angle = angle-180;rotateElement(element,angle);/ Setting the text inside of the display element, inserting a leading zero if needed:clock.display.html(current10?0+current:current);function rotateElement(element,angle)/ Rotating the element, depending on the browser:var rotate = rotate(+angle+deg);if(element.css(MozTransform)!=undefined)element.css(MozTransform,rotate);else if(element.css(WebkitTransform)!=undefined)element.css(WebkitTransform,rotate);/ A version for internet explorer using filters, works but is a bit buggy (no surprise here):else if(element.css(filter)!=undefined)var cos =