jquery는 페이지의 아무 영역이나 클릭하여 마우스 포커스 교차 effect

시스템 개발 중에는 마우스 클릭 초점, 지도 위치 지정, 그림 강조 표시, 초점 위치 지정 페이지 요소 등 여러 위치에서 초점 효과가 필요합니다.
이 작은 기능은 jquery와 그래픽의 2차 개발을 통해 개발되었으며, 페이지의 어느 영역이든 마우스로 클릭하고 현재 클릭 위치에 집중할 수 있도록 해줍니다. 페이지의 모든 요소에 적용되는 위치 효과입니다.
먼저 jquery 엔진 패키지를 소개합니다: jquery-1.4.2.min.js 및 graphic.js
소스 코드 다운로드 주소
효과 js 파일인 qfocus.js를 작성합니다. 소스 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

';
$(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 
 
<본문>

效果 사진:

jquery는 페이지의 아무 영역이나 클릭하여 마우스 포커스 교차 effect_jquery를 얻습니다.

jquery는 페이지의 아무 영역이나 클릭하여 마우스 포커스 교차 effect_jquery를 얻습니다.