<!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>

-ms-zoom property的更多相关文章

  1. Java访问Hbase

    1.kerberos验证 a.下载对应版本JCE(Java Cryptography Extension),解压拷贝local_policy.jar/US_export_policy.jar到$JAV ...

  2. FlyCaptureProperty 摄像机属性

    An enumeration of the different camera properties that can be set via the API. Declaration enum FlyC ...

  3. flipsnap.js 源码阅读备份

    这是官网:http://hokaccha.github.io/js-flipsnap/ 1.引入全局命名空间 类似jQuery插件写法   传入window, document,提高内部访问速度: ; ...

  4. Mybatis拦截器实现分页

    本文介绍使用Mybatis拦截器,实现分页:并且在dao层,直接返回自定义的分页对象. 最终dao层结果: public interface ModelMapper { Page<Model&g ...

  5. mybatis 3.x源码深度解析与最佳实践(最完整原创)

    mybatis 3.x源码深度解析与最佳实践 1 环境准备 1.1 mybatis介绍以及框架源码的学习目标 1.2 本系列源码解析的方式 1.3 环境搭建 1.4 从Hello World开始 2 ...

  6. Mybatis执行CachingExecutor(六)

    前面几篇博客我们介绍了Excutor及抽象类BaseExecutor和实现类SimpleExecutor.BatchExecutor和ReuseExecutor: 博客列表: Mybatis执行Exe ...

  7. myBatis源码之Executor、BaseExecutor和CachingExecutor

    接下来是mybatis的执行过程,mybatis提供了一个接口Executor,Executor接口主要提供了update.query方法及事物相关的方法接口 /** * @author Clinto ...

  8. log4j到log4j2升级迁移方案

    序:这段时间因为维护的项目存在大量日志打印,严重拖慢整体响应时间,在做性能优化的工作中对这块内容进行了升级换代,由以前的log4j升级为log4j2,以实现日志异步打印.接下来记录一下这个费时半个月的 ...

  9. Mybatis学习(六)————— Spring整合mybatis

    一.Spring整合mybatis思路 非常简单,这里先回顾一下mybatis最基础的根基, mybatis,有两个配置文件 全局配置文件SqlMapConfig.xml(配置数据源,全局变量,加载映 ...

  10. Mybatis(六) Spring整合mybatis

    心莫浮躁~踏踏实实走,一步一个脚印,就算不学习,玩,能干嘛呢?人生就是那样,要找点有意思,打发时间的事情来做,而钻研技术,动脑动手的过程,还是比其他工作更有意思些~ so,努力啥的都是强迫自己做自以为 ...

随机推荐

  1. python基础之格式化字符串

    一.格式化字符功能介绍 应用场景:一般在print的时候提供占位符;python中提供两种格式化字符串方式:第一种是古老的利用百分号的方式,第二种是增强的格式化字符串.format 函数. 二.古老的 ...

  2. 使用vue-cli脚手架搭建项目,保存编译时出现的代码检查错误(ESLint)

    一.问题 出现这么写错误是什么原因呢?相信很多小白都会像我一样,第一次接触时有点二丈和尚摸不着头脑.其实是在你用vue-cli脚手架构建项目时用了ESLint代码检查工具,如下图 那么什么是ESLin ...

  3. VUE学习(三)语法

    模板语法 Mustache 语法 1.插值 <span v-once>这个将不会改变: {{ msg }}</span> v-once,一次性,否则就会绑定 {{    }}  ...

  4. [POI2007]ZAP-Queries 数学

    题目描述 Byteasar the Cryptographer works on breaking the code of BSA (Byteotian Security Agency). He ha ...

  5. AngularJS 1.x系列:AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  6. Android Toast语句应用

    1.findViewById()函数使用 函数作用:通过id来找到前台界面的组件 2.Toast语句 (1)介绍 (2)用法 (3)代码示例 package com.lucky.test21; imp ...

  7. 江西理工大学南昌校区排名赛 C: 单身狗的地图游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天决定去喜欢的学妹家玩,但他不记得路,于是他拿出有n个点的完全图,选取了k条不同的路. 完全图:n 个点的图中任意两个点之间都有一条边相连,所以有 n*(n-1 ...

  8. Oracle sql 中的 ALL,ANY,SOME

    [转自] http://www.itpub.net/thread-1355835-1-1.html any和some是等价的,其与all的前面都只能是比较符号,即=, !=, >, <, ...

  9. Tomcat(一)Tomcat常用配置

    操作系统:win8 Jdk版本:1.7.0_51 Jdk目录:C:\Program Files\Java\jdk1.7.0_51 Tomcat版本:8.0.3 Tomcat目录:D:\Program  ...

  10. 剑指offer——面试题4:二维数组中的查找

    // 面试题4:二维数组中的查找 // 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按 // 照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个 // 整数 ...