-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,努力啥的都是强迫自己做自以为 ...
随机推荐
- Python3异常处理
一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1. 异常基础 常用结构: try: pass except Ex ...
- 首字母变大写（stringstream的应用)
Problem Description 输入一个英文句子,将每个单词的第一个字母改成大写字母. Input 输入数据包含多个测试实例,每个测试实例是一个长度不超过100的英文句子,占一行. O ...
- 洛谷 P1486 [NOI2004]郁闷的出纳员
题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常调整员工的工资 ...
- JSP使用Struts2标签库报错
JSP中使用<%@ taglib prefix="s" uri="/struts-tags" %>报错:Cannot find the tag li ...
- HTTP记录
-------------TCP握手协议------------- 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. [第一次握手]建立连接时,客户端发送syn包(syn ...
- JavaScript笔记Array.filter(Boolean)
ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empt ...
- C. Enlarge GCD Codeforces Round #511 (Div. 2)【数学】
题目: Mr. F has nn positive integers, a1,a2,…,an. He thinks the greatest common divisor of these integ ...
- 链表 206 Reverse Linked List, 92,86, 328, 2, 445
表不支持随机查找,通常是使用next指针进行操作. 206. 反转链表 /** * Definition for singly-linked list. * struct ListNode { * i ...
- [转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
- 剑指offer——面试题5：替换空格
利用STL: #include"iostream" #include"stdio.h" #include"algorithm" using ...