js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 表单按钮

jquery实现input表达输入文字,文字放大镜特效

发布时间:2015-09-06 21:42:57    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现input表达输入文字,文字放大镜特效
$.fn.bigGlass = function(type){
	/*
	 *	type 1: 身份证    2:电话号码
	 *	号码放大镜随着字数延伸
	 *	身份证分割: 3 3 4 4 4   手机号码分割: 3 4 4
	*/
	var glassT = $(this).offset().top, glassL = $(this).offset().left;//定义预展示输入框的坐标
	var gId = $(this).attr("id");
	var glassStr = '<div id="bigGlass"><nobr><span></span><span></span><span></span><span></span></nobr></div>';
	$(this).after($(glassStr));
	$(this).keyup(function(){
		showBigGlass();
	})
	//生成放大镜
	function showBigGlass(){
		var inputVal = $("#"+gId).val(), l = inputVal.length;
		$("#bigGlass").css({"top":(glassT-50)+"px","left":glassL+"px"});
		 style="top:'+(glassT-50)+'px;left:'+glassL+'px;"
		if(!inputVal){
			$("#bigGlass").hide();
			return false;
		}
		//身份证号码与电话号码展示逻辑不同,做区分
		$("#bigGlass").html('<nobr><span></span><span></span><span></span><span></span></nobr>');
		if(type == 1){
			if(l <= 3){
				$("#bigGlass").find("span").eq(0).text(inputVal);
			}else if(l <= 6){
				$("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3));
				$("#bigGlass").find("span").eq(1).text(inputVal.substring(3,l));
			}else if(l <= 14){
				$("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3));
				$("#bigGlass").find("span").eq(1).text(inputVal.substring(3,6));
				$("#bigGlass").find("span").eq(2).text(inputVal.substring(6,l));
			}else{
				$("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3));
				$("#bigGlass").find("span").eq(1).text(inputVal.substring(3,6));
				$("#bigGlass").find("span").eq(2).text(inputVal.substring(6,14));
				$("#bigGlass").find("span").eq(3).text(inputVal.substring(14,l));
			}
		}else{
			if(l <= 3){
				$("#bigGlass").find("span").eq(0).text(inputVal);
			}else if(l <= 7){
				$("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3));
				$("#bigGlass").find("span").eq(1).text(inputVal.substring(3,l));
			}else{
				$("#bigGlass").find("span").eq(0).text(inputVal.substring(0,3));
				$("#bigGlass").find("span").eq(1).text(inputVal.substring(3,7));
				$("#bigGlass").find("span").eq(2).text(inputVal.substring(7,l));
			}
		}
		$("#bigGlass").show();
	}
	//控制数字放大镜的显示与销毁
	$(document).click(function(event){
		var obj = event.srcElement || event.target;
		if($(obj).attr("id") != gId){
			$("#bigGlass").html("").hide();
		}else{
			showBigGlass();
		}
	});
}
$(function(){
	$("#cardCode").bigGlass(1);
	$("#cardCode1").bigGlass(2);
})



放大镜

jqzoom仿京东商品详细页产品图片放大镜特效

jquery仿淘宝图片放大镜特效

jquery实现图片放大镜插件,鼠标悬停局部图片放大镜头显示特效

jquery实现图片放大镜效果制作变焦镜头图片放大查看特效

jquery实现input表达输入文字,文字放大镜特效

js实现图片放大镜展示特效代码

jQuery商城网站商品放大镜查看效果特效代码

js放大镜 _jquery图片放大镜特效插件_移动鼠标图片特效代码_商城源码