-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,努力啥的都是强迫自己做自以为 ...
随机推荐
- 我的csdn博客地址
呆雁 持续的谦虚与努力 http://blog.csdn.net/u013539183
- Docker - 使用 Nexus3 搭设私有 NuGet 仓库
目录 前言 NuGet Nexus 私有仓库 说明 安装 Nexus 拉取 Nexus 镜像 运行 Nexus Nexus NuGet 仓库简单使用 Nexus 默认帐号 Repositories 上 ...
- 常用系统的伪静态规则列表（rewrite）
以前在云虚拟机上,是在iis上配置伪静态.这次买的一个香港的空间,商家说把伪静态规则直接放在web下即可. 注意,所有规则放在一起可能会有冲突,只放置你需要的规则即可. #shopex4.8 Rewr ...
- c#几种数据库的大数据批量插入（SqlServer、Oracle、SQLite和MySql）
这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...
- pyhton学习，day1作业，用户名密码登录模块
要求,通过用户名密码登录,登录错误3次,锁定用户名 # coding=utf-8 # Author: RyAn Bi import os, sys #调用系统自己的库 accounts_file = ...
- 【原创】elasticsearch入门
示例 示例一: 示例二: 示例三: 示例四: ES介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Ela ...
- Joi图标
刚开始浏览API的时候,旁边这个图片还真没明白是啥意思.现在才明白过来:),检测工具嘛,哈哈.
- 分享一个大型进销存供应链项目(多层架构、分布式WCF多服务器部署、微软企业库架构)
项目源码下载: WWW.DI81.COM 分享一个大型进销存供应链项目(多层架构.分布式WCF多服务器部署.微软企业库架构) 这是一个比较大型的项目,准备开源了.支持N家门店同时操作.远程WCF+企 ...
- 精神AC合集 2018.4.3
UESTC炸了,先把看似十分OK(只是过了样例)的代码贴上,修复好后再交上去 594 #include<iostream> #include<algorithm> #inclu ...
- POJ - 3233 矩阵套矩阵
题意:给你矩阵\(A\),求\(S=\sum_{i=1}^{k}A^i\) 构造矩阵 \[ \begin{bmatrix} A & E \\ 0 & E\\ \end{bmatrix} ...