-ms-zoom property

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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以上版本,其他瀏覽器最新版本可以:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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 @   ®Geovin Du Dream Park™  阅读(608)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2011-07-23 SQL script 會計記賬 Debit-Credit Bookkeeping
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示