ホームページ > 記事 > ウェブフロントエンド > jquery は、ページの任意の領域をクリックしてマウス フォーカスを達成します。
jquery は、ページの任意の領域をクリックしてマウス フォーカスを達成します。
- WBOYオリジナル
- 2016-05-16 17:31:431184ブラウズ
システム開発中、マウスクリックによるフォーカス、マップの位置決め、画像上のハイライト、ページ要素のフォーカスの位置決めなど、さまざまな場所でフォーカス効果が必要になります。
この小さな機能は、jquery とグラフィックスの二次開発を通じて開発されており、ページの任意の領域をマウスでクリックし、現在のクリック位置に焦点を当てることができます。ページ上の任意の要素に適用される効果を配置します。
最初に jquery エンジン パッケージを紹介します: jquery-1.4.2.min.js と graphics.js
ソース コードのダウンロード アドレス
エフェクト js ファイル、qfocus.js、ソース コードは次のとおりです。
コードをコピー コードは次のとおりです。
var qfocus = {
config:{
"bar_dis":true,//水平バーと垂直バーの表示または非表示
"circle_dis":true,//フォーカスを非表示
"bar_color":"black",/ /線の色
"circle_color":" red",//円の色
"rect_color":"green"//ボックスの色
},
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("上", (_point.y - 25) "px"); 🎜>}
paper = Raphael("canvas");
paper.clear();
var rect(20, 20, 10, 10, 0); attr("ストローク", this.config["rect_color"]) ;
rect.attr("ストローク幅", 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("ストローク", 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(); //Focus
$("#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.offsetHeight;
var postion = ""
if( typeof( oElement.offsetParent ) != ' ' ){
for( var posX = 0, posY = 0; oElement ; oElement = oElement.offsetParent ) {
posX = oElement.offsetLeft;
posY = oElement.offsetTop; >x2 = posX 幅;
y2 = posY 高さ;
} else{
x2 = oElement.x 幅; oElement.y 高さ;
位置 = [ oElement.x, oElement.y , x2, y2];
}
var x = postion[0] ((postion[2] - postion[0]) /2);
var y = 位置[1] ((位置[3] - 位置[1])/2);
return {"x":x,"y":y}; >}
}
html页面调用资源：
<頭>
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("ストローク", 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(); //Focus
$("#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.offsetHeight;
var postion = ""
if( typeof( oElement.offsetParent ) != ' ' ){
for( var posX = 0, posY = 0; oElement ; oElement = oElement.offsetParent ) {
posX = oElement.offsetLeft;
posY = oElement.offsetTop; >x2 = posX 幅;
y2 = posY 高さ;
} else{
x2 = oElement.x 幅; oElement.y 高さ;
位置 = [ oElement.x, oElement.y , x2, y2];
}
var x = postion[0] ((postion[2] - postion[0]) /2);
var y = 位置[1] ((位置[3] - 位置[1])/2);
return {"x":x,"y":y}; >}
}
html页面调用资源：
复制代 代码如下:
<頭>