jquery自動走動的圓形鐘表效果代碼實例
本章節分享一段代碼實例,它實現了圓形鐘表走動效果,代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($){
$.fn.drawClock = function(options){
var mainId = $(this);
//設置默認參數
var defaultOptions = {
'width': '300px',
'height': '300px',
'margin': '200px auto',
'border': '1px solid #888',
'border-radius': '50%',
'box-shadow': '2px 2px 4px #111'
};
var options = $.extend(defaultOptions, options);
mainId.css({
'width': options.width,
'height': options.height,
'margin': options.margin,
'border': options.border,
'border-radius': options['border-radius'],
'box-shadow': options['box-shadow'],
'position': 'relative'
}).css({
'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',
'background': '-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%)'
});
//鐘表盤中心圓
$("<div id='circle'></div>").appendTo(mainId).css({
'width': '20px',
'height': '20px',
'border-radius': '50%',
'box-shadow': '0 0 5px rgba(0,0,0,0.8)',
'position': 'absolute',
'z-index': 999,
'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',
'background': '-moz-radial-gradient(circle, #eee 30%, #ffe 100%)'
}).css({
'left': mainId.width()/2 - $('#circle').width()/2,
'top': mainId.height()/2 - $('#circle').height()/2
});
var dateTime = new Date();
var oHours = dateTime.getHours();
var oMinutes = dateTime.getMinutes();
var oSeconds = dateTime.getSeconds();
//初始化時分秒
var hPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5, "#333", -90+oHours*30+oMinutes*6/12);
var mPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4, "#666", -90+oMinutes*6);
var sPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3, "#f00", -90+oSeconds*6);
//運動時分秒
var timer = setInterval(function(){
dateTime = new Date();
oHours = dateTime.getHours();
oMinutes = dateTime.getMinutes();
oSeconds = dateTime.getSeconds();
hPointer.css({'transform': 'rotate(' + (-90+oHours*30+oMinutes*6/12) + 'deg)'});
mPointer.css({'transform': 'rotate(' + (-90+oMinutes*6) + 'deg)'});
sPointer.css({'transform': 'rotate(' + (-90+oSeconds*6) + 'deg)'});
}, 1000);
//繪制鐘表刻度
for(var i=0; i<60; i++){
var width = 3, height = 6, oBcolor = '#111';
if(i%5 == 0){
width = 5;
height = 10;
}
if(i%15 == 0){
oBcolor = 'red';
}
$("<div class='clockMark'></div>").appendTo(mainId).css({
'width': width,
'height': height,
'position': 'absolute',
'top': 0,
'left': mainId.width()/2,
'background': oBcolor,
'transform': 'rotate(' + i*6 + 'deg)',
"transform-origin": "0 " + mainId.width()/2+'px'
});
}
//繪制鐘表指針
function drawPointer (startx, starty, width, height, bcolor, angle) {
var oPointer = $("<div></div>");
oPointer.appendTo(mainId).css({
'width': width,
'height': height,
'position': 'absolute',
'top': starty,
'left': startx,
'background': bcolor,
'transform': 'rotate(' + angle + 'deg)',
'transform-origin': '0 0'
});
return oPointer;
}
return this;
}
})(jQuery);
$(function(){
$('#clock').drawClock();
});
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至201542412@QQ.com舉報,一經查實,本站將立刻刪除。
相關推薦
-
jquery獲取指定類型子元素代碼實例
本章節介紹一下如何獲取指定類型的子元素,下面就通過代碼實例做一下演示。代碼實例如下:m
-
獲取元素在頁面中的坐標位置代碼實例
本章節分享一段代碼實例,它實現了獲取指定元素在頁面匯總坐標的功能。代碼實例如下
-
outline兩層邊框代碼實例
使用outlin屬性可以實現多層邊框效果。代碼實例如下r co
-
checkbox復選框美化代碼實例
默認狀態下,chckbox復選框并不美觀,雖然滿足基本的需要。但是在美觀度要求很高的網站中,實在是不堪入目,所以需要進行格外的美化。下面分享一個代碼實例,它實現了復選框的美化效果。代碼如下:!DO
-
<input type="file">美化效果代碼實例
關于這里就不介紹了,大家應該都不會陌生。但是它默認的樣式實在是丑陋,難登大雅之堂,下面就分享一段代碼實例,它實現了對此控件的美化效果。代碼實例如下:















