-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>
-ms-zoom property的更多相关文章
- Java访问Hbase
1.kerberos验证 a.下载对应版本JCE(Java Cryptography Extension),解压拷贝local_policy.jar/US_export_policy.jar到$JAV ...
- FlyCaptureProperty 摄像机属性
An enumeration of the different camera properties that can be set via the API. Declaration enum FlyC ...
- flipsnap.js 源码阅读备份
这是官网:http://hokaccha.github.io/js-flipsnap/ 1.引入全局命名空间 类似jQuery插件写法 传入window, document,提高内部访问速度: ; ...
- Mybatis拦截器实现分页
本文介绍使用Mybatis拦截器,实现分页:并且在dao层,直接返回自定义的分页对象. 最终dao层结果: public interface ModelMapper { Page<Model&g ...
- mybatis 3.x源码深度解析与最佳实践（最完整原创）
mybatis 3.x源码深度解析与最佳实践 1 环境准备 1.1 mybatis介绍以及框架源码的学习目标 1.2 本系列源码解析的方式 1.3 环境搭建 1.4 从Hello World开始 2 ...
- Mybatis执行CachingExecutor（六）
前面几篇博客我们介绍了Excutor及抽象类BaseExecutor和实现类SimpleExecutor.BatchExecutor和ReuseExecutor: 博客列表: Mybatis执行Exe ...
- myBatis源码之Executor、BaseExecutor和CachingExecutor
接下来是mybatis的执行过程,mybatis提供了一个接口Executor,Executor接口主要提供了update.query方法及事物相关的方法接口 /** * @author Clinto ...
- log4j到log4j2升级迁移方案
序:这段时间因为维护的项目存在大量日志打印,严重拖慢整体响应时间,在做性能优化的工作中对这块内容进行了升级换代,由以前的log4j升级为log4j2,以实现日志异步打印.接下来记录一下这个费时半个月的 ...
- Mybatis学习（六）————— Spring整合mybatis
一.Spring整合mybatis思路 非常简单,这里先回顾一下mybatis最基础的根基, mybatis,有两个配置文件 全局配置文件SqlMapConfig.xml(配置数据源,全局变量,加载映 ...
- Mybatis(六) Spring整合mybatis
心莫浮躁~踏踏实实走,一步一个脚印,就算不学习,玩,能干嘛呢?人生就是那样,要找点有意思,打发时间的事情来做,而钻研技术,动脑动手的过程,还是比其他工作更有意思些~ so,努力啥的都是强迫自己做自以为 ...
随机推荐
- 八大排序算法的python实现（三）冒泡排序
代码: #coding:utf-8 #author:徐卜灵 #交换排序.冒泡排序 L = [1, 3, 2, 32, 5, 4] def Bubble_sort(L): for i in range( ...
- Jenkins持续集成企业实战系列之两种网站部署的流程-----01
注:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 最初接触Jenkins也是由于公司需求,根据公司需求Java代码项目升级的.(公司是 ...
- 181114socke编程
一.Socket Families 地址簇 socket.AF_UNIX socket.AF_INET socket.AF_INET6 二.Socker Types socket.SOCK_STREA ...
- sqoop常用语句
1,列出全部数据库 sqoop list-databases --connect jdbc:sqlserver://10.10.10.2 --username sa --password 1 2,导 ...
- 洛谷 P4001 [ICPC-Beijing 2006]狼抓兔子
题目描述 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...
- springcloud微服务 总结一
一 什么是微服务 译文: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机 ...
- adminlte+layui框架搭建3 - layui弹出层
在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...
- struts2学习笔记（一）—— struts2介绍及入门程序
一.struts2概述 1.1 什么是struts2? 在介绍Struts2之前,先来认识一下Struts1.Struts1是最早的基于MVC模式的轻量级web框架,他能够合理的划分代码结构,并包含了 ...
- PIE SDK存储格式转换
1.算法功能简介 影像存储格式转换可以实现栅格数据存储格式的自由转换,其中存储格式可以是 BSQ. BIP. BIL 三种格式. 遥感数字图像数据的存储与分发,通常采用以下三种数据格式: BSQ( ...
- [V1-Team] WEDO创意论坛技术规格说明书
WEDO 创意论坛技术规格说明书 0x0 文档版本 版本号 说明 v1.0 初步确定技术路线 附Github仓库:WEDO 0x1 技术说明 1. 前端框架 在主流的前端框架中,我们调研了Vue. ...