<!DOCTYPE HTML><HTML><head><Meta charset="utf⑻"><Title>无标题文档</Title><style>*{margin:0px;padding:0px;}</style><script src="jquery⑴.11.1.Js"></script><script src="bigshow.Js"></script><script>$(function(){$("#info").bigShow([3,3,4,4]);})</script></head><body><br/><br/> 需要放大的内容<input type="text" ID="info"/></body></HTML>
Jquery代码
// JavaScript document$.fn.bigShow=function(num){ //给定多少1个空格，可以是1个数字也能够是1个数组var info=$(this);//传来的text对象var bigT=$("<p ID='bigShow'></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()⑴6;}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实现文本放大效果全部内容，希望文章能够帮你解决JQuery实现文本放大效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）