本js特效代碼兼容：ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等瀏覽器
$.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);
})
