jQuery資料UI旋轉圖形程式碼

1

新建html文件。

2

準備好需要用到的圖示。

3

書寫hmtl程式碼。

<div class="roate-container">

<div class="screen-bg"></div>

<div id="roate1">

<div class="roate-item icon-roate-1"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item icon-roate-2"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item icon-roate-3"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item icon-roate-4"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

</div>

<div id="roate2">

<div class="roate-item icon-sq-1"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item icon-sq-2"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

<div class="roate-item"></div>

</div>

</div>

4

書寫css程式碼。

body { margin: 0; font-family: 'microsoft yahei'; }

.roate-container { position: relative; margin: 0 auto; width: 559px; height: 623px; background: url(../images/roate-bg.png) no-repeat; }

.screen-bg { position: absolute; left: 70px; top: 220px; width: 462px; height: 374px; background-repeat: no-repeat; z-index: 99; }

.roate-item { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 4px; font-size: 0; background: url(../images/icon-item.png) no-repeat; z-index: 9; }

.icon-roate-1, .icon-roate-2, .icon-roate-3, .icon-roate-4 { width: 56px; height: 56px; background-repeat: no-repeat; }

.icon-sq-1 { width: 54px; height: 43px; background: url(../images/icon-sq-1.png) no-repeat; }

.icon-sq-2 { width: 28px; height: 22px; background: url(../images/icon-sq-2.png) no-repeat; }

#roate1 { height: 70%; }

#roate2 { height: 30%; }

.type9901 .screen-bg { background-image: url(../images/9901/bg3.png); }

.type9901 .icon-roate-1 { background-image: url(../images/9901/ic_1.png); }

.type9901 .icon-roate-2 { background-image: url(../images/9901/ic_2.png); }

.type9901 .icon-roate-3 { background-image: url(../images/9901/ic_3.png); }

.type9901 .icon-roate-4 { background-image: url(../images/9901/ic_4.png); }

.type9902 .screen-bg { background-image: url(../images/9902/bg3.png); }

.type9902 .icon-roate-1 { background-image: url(../images/9902/ic_1.png); }

.type9902 .icon-roate-2 { background-image: url(../images/9902/ic_2.png); }

.type9902 .icon-roate-3 { background-image: url(../images/9902/ic_3.png); }

.type9902 .icon-roate-4 { background-image: url(../images/9902/ic_4.png); }

.type9903 .screen-bg { background-image: url(../images/9903/bg3.png); }

.type9903 .icon-roate-1 { background-image: url(../images/9903/ic_1.png); }

.type9903 .icon-roate-2 { background-image: url(../images/9903/ic_2.png); }

.type9903 .icon-roate-3 { background-image: url(../images/9903/ic_3.png); }

.type9903 .icon-roate-4 { background-image: url(../images/9903/ic_4.png); }

.type9904 .screen-bg { background-image: url(../images/9904/bg3.png); }

.type9904 .icon-roate-1 { background-image: url(../images/9904/ic_1.png); }

.type9904 .icon-roate-2 { background-image: url(../images/9904/ic_2.png); }

.type9904 .icon-roate-3 { background-image: url(../images/9904/ic_3.png); }

.type9904 .icon-roate-4 { background-image: url(../images/9904/ic_4.png); }

.type9905 .screen-bg { background-image: url(../images/9905/bg3.png); }

.type9905 .icon-roate-1 { background-image: url(../images/9905/ic_1.png); }

.type9905 .icon-roate-2 { background-image: url(../images/9905/ic_2.png); }

.type9905 .icon-roate-3 { background-image: url(../images/9905/ic_3.png); }

.type9905 .icon-roate-4 { background-image: url(../images/9905/ic_4.png); }

.type9906 .screen-bg { background-image: url(../images/9906/bg3.png); }

.type9906 .icon-roate-1 { background-image: url(../images/9906/ic_1.png); }

.type9906 .icon-roate-2 { background-image: url(../images/9906/ic_2.png); }

.type9906 .icon-roate-3 { background-image: url(../images/9906/ic_3.png); }

.type9906 .icon-roate-4 { background-image: url(../images/9906/ic_4.png); }

5

書寫並新增js程式碼。<script src="js/jquery.min.js"></script>

(function($){

$(function(){

$('#roate1').Roate({

R:193,

cx:296,

cy:274,

step:1,

delay:50

});

$('#roate2').Roate({

R:205,

R0:81,

cx:302,

cy:519,

direction:false,

step:1,

delay:50

});

initType('9904');

})

$.fn.Roate=function(opts){

var roateInter=null;

var $this =this;

opts = $.extend({

R:100,

R0:0,

cx:0,

cy:0,

step:5,

delay:100,

direction:true,//逆時針或逆時針

roateItem:'.roate-item'

},opts||{});

var width = $this.width();

var height = $this.height();

if(!opts.cx){

opts.cx=width/2;

}

if(!opts.cy){

opts.cy=height/2;

}

var $item = $this.find(opts.roateItem);

var size = $item.size();

var roate=0;

opts.R0 = opts.R0==0?opts.R:opts.R0;

roateInter=setInterval(function(){

for (var i = 0; i < size; i++) {

var left = opts.cx+opts.R*Math.sin(Math.PI/180*(roate+360*i/size));

var top = opts.cy+opts.R0*Math.cos(Math.PI/180*(roate+360*i/size));

var $roate = $item.eq(i);

var rheight = $roate.height()/2;

var rwidth = $roate.width()/2;

$roate.css({

left: left-rheight,

top: top-rwidth

});

};

if(opts.direction){

roate -= opts.step;

}else{

roate += opts.step;

}

}, opts.delay);

this.parent().mousemove(function(event) {

if(event.offsetX<width/2){

opts.direction=false;

}else{

opts.direction=true;

}

});

};

window.initType = function(typeCode){

$('.roate-container').addClass('type'+typeCode);

}

})(jQuery)

6

程式碼整體結構。

7

檢視效果。