-ms-zoom property 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Zoom Demo:-ms-zoom</title>
<script type="text/javascript"> 
//塗聚文 20130723
//http://msdn.microsoft.com/en-us/library/ie/ms531189(v=vs.85).aspx
function zoomIn() {
  newZoom= parseInt(oZoom.style.zoom)+10+'%'
      oZoom.style.zoom =newZoom;
	  oCode.innerText='zoom: '+newZoom+'';	
  } 
function zoomOut() {
  newZoom= parseInt(oZoom.style.zoom)-10+'%'
      oZoom.style.zoom =newZoom;
	  oCode.innerText='zoom: '+newZoom+'';	
  } 
function changeZoom() {
  newZoom= parseInt(oSlider.value)
		oZoom.style.zoom=newZoom+'%';
		oCode.innerText='zoom: '+newZoom+'%';	
  } 
function changeZoom2(oSel) {
  newZoom= oSel.options[oSel.selectedIndex].innerText
		oZoom.style.zoom=newZoom;
		oCode.innerText='zoom: '+newZoom+'';	
  } 
</script>

</head>

<body onload="oZoom.style.zoom='50%'; oCode.innerText='zoom: 50%'; ">
 <form>
     <div id="oZoom" style="zoom: 100%" align="center">
        <h1>Welcome to Seattle!</h1>
        <img src="pictures/2.jpg" alt="Seattle skyline" align="left"/>
        <img src="pictures/1.jpg" alt="Seattle skyline" align="left"/>
        <p align="center">A great city in the beautiful state of Washington.</p>
    </div>
<div align="center">
        <select id="percent" onchange="changeZoom2(percent); ">
        <option selected="">Use Percentage Value</option>
        <option>10%</option>
        <option>25%</option>
        <option>50%</option>
        <option>75%</option>
        <option>100%</option>
        <option>150%</option>
        <option>200%</option>
        </select></div>


 
 </form>

</body>

</html>

 CSS3 Hover Image Gallery  圖片放大 IE9以上版本,其他瀏覽器最新版本可以:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS3 Hover Image Gallery  圖片放大 IE9以上版本</title>
<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.18); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.18); /*Mozilla scale version*/
-o-transform:scale(0.18); /*Opera scale version*/
-webkit-transition-duration: 0.15s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.15s; /*Mozilla duration version*/
-o-transition-duration: 0.15s; /*Opera duration version*/
opacity: 0.17; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/

}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

</head>

<body>
<div class="hovergallery">
        <img src="pictures/1.jpg" alt="" />
        <img src="pictures/2.jpg" alt="" />
        <img src="pictures/3.jpg" alt="" />
        <img src="pictures/4.jpg" alt="" />  
</div>
</body>

</html>

 

posted @ 2013-07-23 18:47  ®Geovin Du Dream Park™  阅读(606)  评论(0)  编辑  收藏  举报