Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Magnifying Glass by JavaScript compatible with IE/FF/OP

Tuesday, October 28, 2008 by Lance Zhang ,

Save the following code as .htm file, open it you will see the effect.

<script language="JavaScript">
<!--
var smallX = 200; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){
head.innerHTML="图片已载入";
isIE=window.event?1:0;
if (srcX==-1 && srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX;
viewX=bigX/srcX*smallX; //预览范围
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //缩小比例
smallpic.width=smallX;
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE;
smallbox.style.height=smallpic.offsetHeight+border*2*isIE;
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e;
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2;
vY+=-viewY/2;
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl;
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
//-->
</style>
<div id="head">image loading</div>
<div id="smallbox"><img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div>

0 comments

 

Write Model Pop up with shadow back ground by yourself

by Lance Zhang ,

I think it is really easy to be done by JavaScript and a little of CSS:




<html>
<head>
</head>
<body>
<a href="1.htm" onmouseover="sAlert('hello');" >Hi move here</a>
<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//Width
msgh=100;//Height
titleheight=25 //title Height
bordercolor="#336699";//boder color
titlecolor="#99CCFF";//title color

var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="Close";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>

0 comments

 

Show an enlarge image on image's tooltip

by Lance Zhang ,

Hi friend

try to use the following code, easy and coolCool

<html>


<head>


<title>Lance</title>


<script language="javascript">


function showPic(sUrl)


{


var x,y;


x = event.clientX;


y = event.clientY;


document.getElementById("Layer1").style.left = x;


document.getElementById("Layer1").style.top = y;


document.getElementById("Layer1").innerHTML = "<img height=200 width=400 src=\"" + sUrl + "\">";


document.getElementById("Layer1").style.display = "block";


}


function hiddenPic(){


document.getElementById("Layer1").innerHTML = "";


document.getElementById("Layer1").style.display = "none";


}


</script>


</head>


<body>


<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>


<img src="http://forums.asp.net/Themes/FAN/style/i/logo.png" onmouseout="hiddenPic();" onmousemove="showPic(this.src);"/>


<p></p>


</body>


</html>







0 comments

 

A Cool ModalPopUp by JavaScript

Saturday, October 25, 2008 by Lance Zhang ,

<html>

<head>

</head>

<body>

    <a href="1.htm" onmouseover="sAlert('hello');">Hi move here</a>



    <script type="text/javascript" language="javascript"> 

function sAlert(str){ 

   var msgw,msgh,bordercolor; 

   msgw=400;//Width

   msgh=100;//Height 

   titleheight=25 //title Height

   bordercolor="#336699";//boder color

   titlecolor="#99CCFF";//title color

   var sWidth,sHeight; 

   sWidth=document.body.offsetWidth; 

   sHeight=screen.height; 

   var bgObj=document.createElement("div"); 

   bgObj.setAttribute('id','bgDiv'); 

   bgObj.style.position="absolute"; 

   bgObj.style.top="0"; 

   bgObj.style.background="#777"; 

   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 

   bgObj.style.opacity="0.6"; 

   bgObj.style.left="0"; 

   bgObj.style.width=sWidth + "px"; 

   bgObj.style.height=sHeight + "px"; 

   bgObj.style.zIndex = "10000"; 

   document.body.appendChild(bgObj); 

   var msgObj=document.createElement("div") 

   msgObj.setAttribute("id","msgDiv"); 

   msgObj.setAttribute("align","center"); 

   msgObj.style.background="white"; 

   msgObj.style.border="1px solid " + bordercolor; 

   msgObj.style.position = "absolute"; 

   msgObj.style.left = "50%"; 

   msgObj.style.top = "50%"; 

   msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 

   msgObj.style.marginLeft = "-225px" ; 

   msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 

   msgObj.style.width = msgw + "px"; 

   msgObj.style.height =msgh + "px"; 

   msgObj.style.textAlign = "center"; 

   msgObj.style.lineHeight ="25px"; 

   msgObj.style.zIndex = "10001"; 

   var title=document.createElement("h4"); 

   title.setAttribute("id","msgTitle"); 

   title.setAttribute("align","right"); 

   title.style.margin="0"; 

   title.style.padding="3px"; 

   title.style.background=bordercolor; 

   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 

   title.style.opacity="0.75"; 

   title.style.border="1px solid " + bordercolor; 

   title.style.height="18px"; 

   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 

   title.style.color="white"; 

   title.style.cursor="pointer"; 

   title.innerHTML="Close"; 

   title.onclick=function(){ 

          document.body.removeChild(bgObj); 

          document.getElementById("msgDiv").removeChild(title); 

          document.body.removeChild(msgObj); 

        } 

   document.body.appendChild(msgObj); 

   document.getElementById("msgDiv").appendChild(title); 

   var txt=document.createElement("p"); 

   txt.style.margin="1em 0" 

   txt.setAttribute("id","msgTxt"); 

   txt.innerHTML=str; 

   document.getElementById("msgDiv").appendChild(txt); 

} 

    </script>



</body>

</html>

0 comments