jquery는 페이지의 아무 영역이나 클릭하여 마우스 포커스 교차 effect_jquery를 얻습니다.
- WBOY원래의
- 2016-05-16 17:31:431175검색
시스템 개발 중에는 마우스 클릭 초점, 지도 위치 지정, 그림 강조 표시, 초점 위치 지정 페이지 요소 등 여러 위치에서 초점 효과가 필요합니다.
이 작은 기능은 jquery와 그래픽의 2차 개발을 통해 개발되었으며, 페이지의 어느 영역이든 마우스로 클릭하고 현재 클릭 위치에 집중할 수 있도록 해줍니다. 페이지의 모든 요소에 적용되는 위치 효과입니다.
먼저 jquery 엔진 패키지를 소개합니다: jquery-1.4.2.min.js 및 graphic.js
소스 코드 다운로드 주소
효과 js 파일인 qfocus.js를 작성합니다. 소스 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
var qfocus = {
config:{
"bar_dis":true,//가로 및 세로 막대 표시 또는 숨기기
"circle_dis":true,//포커스 숨기기
"bar_color":"black",/ /선 색상
"circle_color":" 빨간색",//원형 색상
"direct_color":"녹색"//상자 색상
},
locationTimer: null,//시간 제어 식별자
onmouseClick: function(ev){/ /마우스 클릭으로 포커스 효과 그리기
var point = this.mousePosition(ev)
this.showFocus(point); ,
onclickElement:function(obj) {//마우스 클릭하여 초점 좌표 가져오기
var _point = this.elementPosition(obj);
this.showFocus(_point)},
showFocus:function (point) {//포커스 효과 표시
if (this.locationTimer) {
clearTimeout(this.locationTimer)
} //타이머 지우기
var mapDiv = "# mapdiv";
var _point = point;
var canvas = $("#canvas");
var vLine = $("#vline");
var hLine = $("#hline ");
//포커스 숨기기 또는 표시
if (this.config["circle_dis"] == true) {
if (!$("#canvas").attr("id") ) {
canvas = '';
$(canvas).appendTo("body");
} else {
canvas.css ("왼쪽", (_point.x - 25) "px" );
canvas.css("top", (_point.y - 25) "px")
canvas.show(); 🎜>}
paper = Raphael("캔버스");
paper.clear()
var ret(20, 20, 10, 10, 0); attr("Stroke", this.config["direct_color"]) ;
direct.attr("strom-width", 1)
}
//가로 막대와 세로 막대 표시 여부
if (this.config["bar_dis"] == true) {
if (!$("#vline").attr("id")) {
vLine = "
";
$(vLine).appendTo("body") ;
} else {
$(vLine).css("left",(_point.x) "px");
vLine.show();
}
if (! $("#hline").attr("id")) {
var hLine = "";
$(hLine).appendTo("body" );
} else {
$("#hline").css("top",(_point.y ) "px ");
hLine.show();
}
}
this.hideFocus();
return true;
}, hideFocus:function() {//포커스 숨기기 효과
if (paper != null) {
var Circle = paper.circle(25, 25, 30)
circle.attr("Stroke", this.config["circle_color"]);
circle.attr("획 폭", 1);
var anim = Raphael.animation({
r: 5
}, 900, null, function(){
this .locationTimer = setTimeout(function(){
$("#canvas" ).hide(); //포커스
$("#vline").hide(); //가로 막대
$ ("#hline").hide(); //세로 막대
clearTimeout(this.locationTimer)
},
}); 🎜>} else {
this.locationTimer = setTimeout(function(){
$("#canvas").hide(); //포커스
$("#vline").hide() ; //가로 막대
$("#hline").hide( ); //세로 막대
clearTimeout(this.locationTimer)
}
}, mousePosition:function (e) {
var x,y ;
var e = e||window.event;
return {
x:e.clientX document.body.scrollLeft document.documentElement.scrollLeft,
y:e.clientY document.body.scrollTop document.documentElement.scrollTop
}
},elementPosition:function( oElement ) {
var x2 = 0; >var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
var position = ""
if( typeof( oElement.offsetParent ) != '정의되지 않음 ' ){
for( var posX = 0, posY = 0; oElement ; oElement = oElement.offsetParent ) {
posX = oElement.offsetLeft;
posY = oElement.offsetTop
x2 = posX 너비;
y2 = posY 높이;
위치 = [ posX, posY ,x2, y2]
} else{
x2 = oElement.x 너비; oElement.y 높이;
position = [ oElement.x, oElement.y , x2, y2]
}
var x = position[0] ((postion[2] - position[0]) /2);
var y = 위치[1] ((위치[ 3] - 위치[1])/2)
return {"x":x,"y":y}; >}
}
html页face调用源码:
<머리>
qfocus
<본문>
$(vLine).appendTo("body") ;
} else {
$(vLine).css("left",(_point.x) "px");
vLine.show();
}
if (! $("#hline").attr("id")) {
var hLine = "";
$(hLine).appendTo("body" );
} else {
$("#hline").css("top",(_point.y ) "px ");
hLine.show();
}
}
this.hideFocus();
return true;
}, hideFocus:function() {//포커스 숨기기 효과
if (paper != null) {
var Circle = paper.circle(25, 25, 30)
circle.attr("Stroke", this.config["circle_color"]);
circle.attr("획 폭", 1);
var anim = Raphael.animation({
r: 5
}, 900, null, function(){
this .locationTimer = setTimeout(function(){
$("#canvas" ).hide(); //포커스
$("#vline").hide(); //가로 막대
$ ("#hline").hide(); //세로 막대
clearTimeout(this.locationTimer)
},
}); 🎜>} else {
this.locationTimer = setTimeout(function(){
$("#canvas").hide(); //포커스
$("#vline").hide() ; //가로 막대
$("#hline").hide( ); //세로 막대
clearTimeout(this.locationTimer)
}
}, mousePosition:function (e) {
var x,y ;
var e = e||window.event;
return {
x:e.clientX document.body.scrollLeft document.documentElement.scrollLeft,
y:e.clientY document.body.scrollTop document.documentElement.scrollTop
}
},elementPosition:function( oElement ) {
var x2 = 0; >var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
var position = ""
if( typeof( oElement.offsetParent ) != '정의되지 않음 ' ){
for( var posX = 0, posY = 0; oElement ; oElement = oElement.offsetParent ) {
posX = oElement.offsetLeft;
posY = oElement.offsetTop
x2 = posX 너비;
y2 = posY 높이;
위치 = [ posX, posY ,x2, y2]
} else{
x2 = oElement.x 너비; oElement.y 높이;
position = [ oElement.x, oElement.y , x2, y2]
}
var x = position[0] ((postion[2] - position[0]) /2);
var y = 위치[1] ((위치[ 3] - 위치[1])/2)
return {"x":x,"y":y}; >}
}
html页face调用源码:
复代码 代码如下:
<머리>
<본문>