JQuery实现文本放大效果
来源:互联网 发布:nba2k罗德曼数据 编辑:程序博客网 时间:2024/05/16 16:56
html页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="bigshow.js"></script>
<script>
$(function(){
$("#info").bigShow([3,3,4,4,4]);
})
</script>
</head>
<body>
<br/><br/>
需要放大的内容<input type="text" id="info"/>
</body>
</html>
JQuery代码
// JavaScript Document
$.fn.bigShow=function(num){ //给定多少一个空格,可以是一个数字也可以是一个数组
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()-16;
}
info.keyup(function(){
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);//实时赋值
var widths=info.offset().left+info.width()/2-bigT.width()/2;//放大框距左边的距离
bigT.css({top:tops,left:widths});//设置位置
});
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});
});
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="bigshow.js"></script>
<script>
$(function(){
$("#info").bigShow([3,3,4,4,4]);
})
</script>
</head>
<body>
<br/><br/>
需要放大的内容<input type="text" id="info"/>
</body>
</html>
JQuery代码
// JavaScript Document
$.fn.bigShow=function(num){ //给定多少一个空格,可以是一个数字也可以是一个数组
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()-16;
}
info.keyup(function(){
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);//实时赋值
var widths=info.offset().left+info.width()/2-bigT.width()/2;//放大框距左边的距离
bigT.css({top:tops,left:widths});//设置位置
});
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});
});
}
0 0
- JQuery实现文本放大效果
- JQuery实现文本放大效果
- jquery与jQzoom实现图片放大效果
- jQuery 实现点击文字放大效果
- CSS、jQuery实现放大缩小动画效果
- 实现文本首字放大
- JQuery实现图片放大的动态菜单效果
- jQuery实现鼠标滑过图片放大效果
- jquery鼠标移动图片上实现放大效果
- jquery 商品图片放大效果
- 转载 css放大效果实现
- 利用jquery制作图片经过放大效果
- 基于jQuery的图片放大效果
- jquery datatables 行放大效果--增加tooltip
- jquery点击单张图片放大效果
- jquery 点击图片放大效果 基于thinkphp
- jQuery动画效果-向右移动放大
- JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果
- 1.9探讨一下头文件
- JS 之 (一)入门篇
- autoRelease内存管理方式
- JSTL标签库_02(EL表达式)
- Wireshark图解教程(简介、抓包、过滤器)
- JQuery实现文本放大效果
- UVa OJ 1608 - Non-boring sequences
- 输入一个0~6的整数,转换成星期输出。
- 无符号数除以非2的幂
- maven学习笔记之三、构建第一个java web工程
- Angular解决IE和Firefox下button内部元素ng-click事件被屏蔽
- JS模拟打字练习
- leetcode——Climbing Stairs
- java如何打印出字符串中的所有数字。