CN105786327A

CN105786327A - Method for rapidly developing APP (application) disc menu of mobile phone

Info

Publication number: CN105786327A
Application number: CN201610098288.XA
Authority: CN
Inventors: 肖庆超; 杨培强; 程林
Original assignee: Inspur Software Group Co Ltd
Current assignee: Inspur Software Group Co Ltd
Priority date: 2016-02-23
Filing date: 2016-02-23
Publication date: 2016-07-20

Abstract

The invention discloses a method for rapidly developing a disc menu of a mobile phone APP, which comprises the steps of manufacturing a disc picture by introducing yuanpan. The method solves the problem of long development time caused by the problems of complex logic, difficult development and the like when a novice mobile phone APP developer develops the disc menu; the development time is saved, so that the development cost of the project is saved; the developer can realize the function only by making the picture without setting the style, thereby greatly reducing the requirements on developers; the problem that people with low pattern familiarity develop a disc menu and are not attractive is solved.

Description

A kind of method of quick exploitation mobile phone A PP disk menu

Technical field

The present invention relates to technical field of software development, a kind of method being specifically related to quick exploitation mobile phone A PP disk menu.

Background technology

The Internet has had been introduced in the epoch of maturation, the most increasingly paying attention to and exchanging between user, and this needs communication tool with regard to essential, and therefore, smart mobile phone is increasingly becoming the necessary article of overwhelming majority people.And for a user, the aesthetic property of cell phone software and practicality become the important evaluation criterion of a mobile phone A PP software success or not, and disk menu is exactly a menu with aesthetic property and practicality.

Summary of the invention

The technical problem to be solved in the present invention is: the present invention provides a kind of method of quick exploitation mobile phone A PP disk menu.

The technical solution adopted in the present invention is:

A kind of method of quick exploitation mobile phone A PP disk menu, described method is by introducing yuanpan.js, make disk picture, then initialization function init (sum) is called, wherein sum represents the number of menu, picture is put into corresponding region, writes call back function openfunc, complete exploitation.

This method quickly and easily can develop both artistic and practical disk menu, is a kind of extraordinary method.

It is as follows that described method realizes step:

The first step: introduce yuanpan.js in respective page;

Second step: the disk picture made and background picture are put into corresponding position;

3rd step: call function init (sum) and menu number menuSum is set;

4th step: write call back function openfunc(i), wherein parameter i is the sequence number of clicked on menu, completes page development；

5th step: click on disc centre position, can trigger call back function, parameter i received is the sequence number of surface menu；Clicking on other positions on disk, trigger call back function, parameter i received is the sequence number of current location menu.

Described yuanpan.js is to realize the correlation technique that the operation such as rotation and click of disk processes.

The invention have the benefit that

1) when of solving mobile phone A PP novice developers exploitation disk menu, owing to logic is complicated, the problem that the problems such as exploitation is difficult cause development time length；

2) save the development time, thus save the development cost problem of project；

3) developer need not arrange pattern, it is only necessary to produces picture and just can realize function, largely reduces the requirement to developer；

4) the inaesthetic problem of disk menu that the people that pattern familiarity is the highest is developed is solved.

Detailed description of the invention

Below by detailed description of the invention, the present invention is further described:

Embodiment 1:

The method quickly and easily can develop both artistic and practical disk menu.

Embodiment 2:

On the basis of embodiment 1, it is as follows that method described in the present embodiment realizes step:

The first step: introduce yuanpan.js in respective page;

3rd step: call function init (sum) and menu number menuSum is set;

The example that call be presented herein below:

init(6)；

function openfunc(i){

switch (i) {

case 0:

break;

case 1:

break;

case 2:

break;

case 3:

break;

case 4:

break;

case 5:

break;

default:

break;

}

Embodiment 3:

On the basis of embodiment 2, yuanpan.js described in the present embodiment is to realize the correlation technique that the operation such as rotation and click of disk processes.

Yuanpan.js program code is as follows:

var flag = false, startX = 0, startY = 0, parentObj = $('#yuanpan'),parentObjz = $('#yuanpanz'),parentObjs = $('#yuanpans'),

angle = 0, startMoveX = 0, startMoveY = 0,iszd = false,isfirstzd = true,

xAxis = 0, yAxis = 0, lastAngle = 0, curId = 1,zdId=0; menuSum = 6;

function init(sum){

document.getElementById("header").style.height=localStorage.pmh/9+"px";

document.getElementById("content").style.height=localStorage.framezjyH+"px";

document.getElementById("yuanpan").style.width=localStorage.pmw+"px";

document.getElementById("yuanpan").style.height=localStorage.pmw+"px";

menuSum = sum;

}

var forbiddenEvent = function(e){

var tagName = e.target.tagName;

if(tagName === 'INPUT' ||tagName === 'TEXTAREA'){ return true;}

e.preventDefault();

if(this.isTouch){ e.stopPropagation();e.cancelabel = false;return false;

}else{e.returnValue = false;}

};

var getAngle = function(x1, y1, x2, y2) {

var x = Math.abs(x1 - x2); var y = Math.abs(y1 - y2);

var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z;

var radina = Math.acos(cos); var angle = radina*114.59156; return angle;

}

parentObj.bind('touchstart',function(e){

var touch = e.originalEvent ? e.originalEvent.touches[0] : e; flag = true;

isfirstzd = true; startX = touch.pageX; startY = touch.pageY;

startMoveX = startX; startMoveY = startY;

$(window).bind('DOMMouseScroll',forbiddenEvent)

.bind('mousewheel',forbiddenEvent).bind('touchmove',forbiddenEvent);

}).bind('touchmove',function(e){

var touch = e.originalEvent ? e.originalEvent.touches[0] : e;

moveX = touch.pageX; moveY = touch.pageY;

if ( (0 != startMoveX || 0 != startMoveY) && yAxis <= moveY ) {

if(isfirstzd == true){ isfirstzd = false;

document.getElementById("yuanpans").style.backgroundImage='url("image/image_zz.png")';

document.getElementById("yuanpan").style.backgroundImage='url("image/image_t'+curId+'.png")';}

var before = getAngle(xAxis, yAxis, startMoveX, startMoveY);

var after = getAngle(xAxis, yAxis, moveX, moveY); var addAngle = 0;

if ( startMoveX <= xAxis && moveX <= xAxis ) {addAngle = before - after;

} else if ( startMoveX > xAxis && moveX > xAxis ) {addAngle = after - before;

}lastAngle = lastAngle + addAngle;

if(!flag){return false; }

uexAudio.play(0);

parentObjz.css({'-webkit-transform':'rotate('+(-lastAngle)+'deg)'});

parentObjs.css({'-webkit-transform':'rotate('+lastAngle+'deg)'});

} else if ( (0 != startMove || 0 != startMoveY) && yAxis > moveY ) {

if(isfirstzd == true){ isfirstzd = false;

document.getElementById("yuanpan").style.backgroundImage='url("image/image_t'+curId+'.png")'; }

var before = getAngle(xxis, yAxis, startMoveX, startMoveY);

var after = getAngle(xAxis, yAxis, moveX, moveY); var addAngle = 0;

if ( startMoveX <= xAxis && moveX <= xAxis ) {addAngle = after - before;

} else if ( startMoveX > xAxis && moveX > xAxis ) {addAngle = before - after;

}lastAngle = lastAngle + addAngle;

if(!flag){ return false;}

uexAudio.play(0);

parentObjz.css({'-webkit-transform':'rotate('+(-lastAngle)+'deg)'});

parentObjs.css({'-webkit-transform':'rotate('+lastAngle+'deg)'});

}var xzjd = lastAngle%60;

if(xzjd<30){xzjd = -xzjd;

}else{xzjd = 60 - xzjd; }

var zAngle = (lastAngle + xzjd)%360;

var wz = parseInt(zAngle/60)%6;

if(wz<0){ wz = 6+wz; }zdId = 1 + wz;

document.getElementById("yuanpan").style.backgroundImage='url("image/image_t'+zdId+'.png")';

startMoveX = moveX; startMoveY = moveY;

}).bind('touchend',function(e){flag = false;if(isfirstzd == true){

isfirstzd = false;gofunc();

}else{

var xzjd = lastAngle%60;

if(xzjd<30){ xzjd = -xzjd;

}else{xzjd = 60 - xzjd;}

lastAngle = lastAngle + xzjd;

parentObjz.css({'-webkit-transform':'rotate('+(-lastAngle)+'deg)'});

parentObjs.css({'-webkit-transform':'rotate('+lastAngle+'deg)'});

lastAngle = lastAngle%360;var wz = parseInt(lastAngle/60)%6;

if(wz<0){ wz = 6+wz; }curId = 1 + wz;

document.getElementById("yuanpan").style.backgroundImage='url("image/image_zz.png")';

document.getElementById("yuanpans").style.backgroundImage='url("image/image_t'+curId+'.png")'; }

$(window).unbind('DOMMouseScroll',forbiddenEvent)

.unbind('mousewheel',forbiddenEvent).unbind('touchmove',forbiddenEvent);

});

function gofunc(){

var x = Math.abs(startX - xAxis); var y = Math.abs(startY - yAxis);

var r = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

if(r<(xAxis/2)){ openfunc(curId%6);

}else if(r < xAxis){

var cos = (startX - xAxis) / r;var radina = Math.acos(cos);

var angle = radina*114.59156;

if(startY < yAxis){

if(angle<120){

openZhfw((curId+1)%6);

}else if(angle<240){

openfunc(curId);

}else{

openfunc((curId+5)%6);

}

}else{

if(angle<120){openfunc((curId+2)%6);

}else if(angle<240){openfunc((curId+3)%6);

}else{openfunc((curId+4)%6); }

}

Wherein:

Gofunc () is to judge that click on is the function of which menu；

GetAngle (x1, y1, x2, y2) is the function of the angle asking rotation according to two point coordinates and centre coordinate thereof；

The relevant treatment function the most also click on screen, sliding and frameing out.

Embodiment of above is merely to illustrate the present invention; and not limitation of the present invention; those of ordinary skill about technical field; without departing from the spirit and scope of the present invention; can also make a variety of changes and modification; the technical scheme of the most all equivalents falls within scope of the invention, and the scope of patent protection of the present invention should be defined by the claims.

Claims

1. the method for a quick exploitation mobile phone A PP disk menu, it is characterised in that: described method, by introducing yuanpan.js, makes disk picture, then initialization function init (sum) is called, picture is put into corresponding region, writes call back function openfunc, complete exploitation.

The method of a kind of quick exploitation mobile phone A PP disk menu the most according to claim 1, it is characterised in that it is as follows that described method realizes step:

The first step: introduce yuanpan.js in respective page;

3rd step: call function init (sum) and menu number menuSum is set;

5th step: click on disc centre position, triggers call back function, and parameter i received is the sequence number of surface menu；Clicking on other positions on disk, trigger call back function, parameter i received is the sequence number of current location menu.

The method of a kind of quick exploitation mobile phone A PP disk menu the most according to claim 2, it is characterised in that: described yuanpan.js is rotation and the correlation technique of clicking operation process realizing disk.