JQuery实现文本放大效果

// JavaScript Document

$.fn.bigShow=function(num){ //给定多少一个空格,,可以是一个数字也可以是一个数组

var info=$(this);//传来的text对象

var bigT=$("<p></p>");//获取放大框对象

info.after(bigT);//增加标签

bigT.css({position:"absolute",height:"25px",border:"1px solid #F93",color:"red",display:"none",padding:"4px","line-height":"25px","font-size":"28px","border-radius":"2px","font-weight":"bold"});//设置放大框样式

var tops;//放大框距顶部的距离

if(info.offset().top<50){//放大框在下方显示

tops=info.offset().top+info.height()+10;

}else{

tops=info.offset().top-bigT.height()-16;

}

info.keyup(function(){

var widths=info.offset().left+info.width()/2-bigT.width()/2;//放大框距左边的距离

bigT.css({top:tops,left:widths});//设置位置

var str="";

var vals=$(this).val();

if(typeof(num)=="object"){

var index=0;

for(var i=0;i<num.length;i++){

if(i==0){

str+=vals.substr(index,num[i])+" ";

}else{

str+=vals.substr(index,num[i])+" ";

}

index+=num[i];

}

}else{

for(var i=0;i<vals.length;i+=4){

str+=vals.substr(i,4)+" ";

}

}

bigT.text(str);//实时赋值

});

info.blur(function(){

bigT.css("display","none");

});

info.focus(function(){

bigT.css("display","block");

var widths=info.offset().left+info.width()/2-bigT.width()/2;

bigT.css({top:tops,left:widths});

});

}

家门前的那条小路,到底通向了什么样的远方呢?

JQuery实现文本放大效果

相关文章:

你感兴趣的文章:

标签云: