频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
漂亮的jquery鼠标焦点十字效果
2013-06-22 16:34:22           
收藏   我要投稿

系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素。

本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置。适用于页面任何元素的位置效果。

首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js

 


编写实现效果js文件,qfocus.js,源码如下:


[javascript] 
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 = "#mapp"; 
        var _point = point; 
         
        var canvas = $("#canvas"); 
        var vLine = $("#vline"); 
        var hLine = $("#hline"); 
         
        //焦点隐藏或显示  
        if (this.config["circle_dis"] == true) { 
            if (!$("#canvas").attr("id")) { 
                canvas = '<p id="canvas"  style="left:' + (_point.x - 25) + 'px;top:' + (_point.y - 25) + 'px;width:50px;height:50px;overflow:hidden;position:absolute;border:solid 0px red;"/>'; 
                $(canvas).appendTo("body"); 
            } else { 
                canvas.css("left", (_point.x - 25) + "px"); 
                canvas.css("top", (_point.y - 25) + "px"); 
                canvas.show(); 
            } 
            paper = Raphael("canvas"); 
            paper.clear(); 
             
            var rect = paper.rect(20, 20, 10, 10, 0); 
            rect.attr("stroke", this.config["rect_color"]); 
            rect.attr("stroke-width", 1); 
        } 
         
        //是否显示横竖条  
        if (this.config["bar_dis"] == true) { 
            if (!$("#vline").attr("id")) { 
                vLine = "<p id='vline' style='background-color:"+this.config["bar_color"]+";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>"; 
                $(vLine).appendTo("body"); 
            } else { 
                $(vLine).css("left",(_point.x) + "px"); 
                vLine.show(); 
            } 
            if (!$("#hline").attr("id")) { 
                var hLine = "<p id='hline' style='overflow:hidden;background-color:"+this.config["bar_color"]+";height:1px;width:100%;position:absolute;left:0px;top:" + (_point.y ) + "px;'/>"; 
                 $(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("stroke-width", 1); 
            var anim = Raphael.animation({ 
                r: 5 
            }, 900, null, function(){ 
                this.locationTimer = setTimeout(function(){ 
                    $("#canvas").hide(); //焦点  
                    $("#vline").hide();  //横条  
                    $("#hline").hide();  //竖条  
                    clearTimeout(this.locationTimer); 
                }, 500); 
            }); 
            circle.animate(anim); 
        } else { 
            this.locationTimer = setTimeout(function(){ 
                $("#canvas").hide(); //焦点  
                $("#vline").hide();  //横条  
                $("#hline").hide();  //竖条  
                clearTimeout(this.locationTimer); 
            }, 500); 
        } 
         
    },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 postion  = ""; 
        if( typeof( oElement.offsetParent ) != 'undefined' ){ 
            for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) { 
                posX += oElement.offsetLeft; 
                posY += oElement.offsetTop;       
            } 
            x2 = posX + width; 
            y2 = posY + height; 
            postion = [ posX, posY ,x2, y2]; 
        } else{ 
            x2 = oElement.x + width; 
            y2 = oElement.y + height; 
            postion = [ oElement.x, oElement.y, x2, y2]; 
        } 
        var x = postion[0] + ((postion[2] - postion[0])/2); 
        var y = postion[1] + ((postion[3] - postion[1])/2); 
        return {"x":x,"y":y}; 
    } 

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 = "#mapp";
        var _point = point;
       
        var canvas = $("#canvas");
        var vLine = $("#vline");
        var hLine = $("#hline");
       
        //焦点隐藏或显示
        if (this.config["circle_dis"] == true) {
         if (!$("#canvas").attr("id")) {
                canvas = '<p id="canvas"  style="left:' + (_point.x - 25) + 'px;top:' + (_point.y - 25) + 'px;width:50px;height:50px;overflow:hidden;position:absolute;border:solid 0px red;"/>';
                $(canvas).appendTo("body");
            } else {
                canvas.css("left", (_point.x - 25) + "px");
                canvas.css("top", (_point.y - 25) + "px");
                canvas.show();
            }
         paper = Raphael("canvas");
         paper.clear();
           
         var rect = paper.rect(20, 20, 10, 10, 0);
            rect.attr("stroke", this.config["rect_color"]);
            rect.attr("stroke-width", 1);
        }
       
        //是否显示横竖条
        if (this.config["bar_dis"] == true) {
         if (!$("#vline").attr("id")) {
             vLine = "<p id='vline' style='background-color:"+this.config["bar_color"]+";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>";
    $(vLine).appendTo("body");
         } else {
    $(vLine).css("left",(_point.x) + "px");
             vLine.show();
         }
         if (!$("#hline").attr("id")) {
             var hLine = "<p id='hline' style='overflow:hidden;background-color:"+this.config["bar_color"]+";height:1px;width:100%;position:absolute;left:0px;top:" + (_point.y ) + "px;'/>";
     $(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("stroke-width", 1);
            var anim = Raphael.animation({
                r: 5
            }, 900, null, function(){
             this.locationTimer = setTimeout(function(){
                    $("#canvas").hide(); //焦点
                    $("#vline").hide();  //横条
                    $("#hline").hide();  //竖条
                    clearTimeout(this.locationTimer);
                }, 500);
            });
            circle.animate(anim);
        } else {
         this.locationTimer = setTimeout(function(){
                $("#canvas").hide(); //焦点
                $("#vline").hide();  //横条
                $("#hline").hide();  //竖条
                clearTimeout(this.locationTimer);
            }, 500);
        }
     
    },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 postion  = "";
  if( typeof( oElement.offsetParent ) != 'undefined' ){
   for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
    posX += oElement.offsetLeft;
    posY += oElement.offsetTop;     
   }
   x2 = posX + width;
   y2 = posY + height;
   postion = [ posX, posY ,x2, y2];
  } else{
   x2 = oElement.x + width;
   y2 = oElement.y + height;
   postion = [ oElement.x, oElement.y, x2, y2];
  }
  var x = postion[0] + ((postion[2] - postion[0])/2);
  var y = postion[1] + ((postion[3] - postion[1])/2);
  return {"x":x,"y":y};
    }
}

html页面调用源码:


[html] 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/graphics.js"></script> 
<script type="text/javascript" src="js/qfocus.js"></script> 
<title>qfocus</title> 
<script type="text/javascript"> 
function forward(ev){  
    qfocus.onmouseClick(ev); 

document.onmousedown=forward; 
</script> 
</head> 
<body> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/graphics.js"></script>
<script type="text/javascript" src="js/qfocus.js"></script>
<title>qfocus</title>
<script type="text/javascript">
function forward(ev){
 qfocus.onmouseClick(ev);
}
document.onmousedown=forward;
</script>
</head>
<body>
</body>
</html>

点击复制链接 与好友分享!回本站首页
上一篇:js 写一个字符串转成驼峰的方法
下一篇:浅谈Jquery的使用上篇
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站