JS achieve image zoom

In the Internet, they often see picture zoom function, and today his hands also wrote one of the following is the source code:

<html>

<head>

<title> picture automatically zoom </ title>

</ Head>

<body>
<script language="javascript">
<! -
function bimg (pic) (
/ / Get the object scaling, and transformed into a decimal integer
var zoom = parseInt (pic.style.zoom, 10) | | 100;
/ / Wheel movement quantity move +120, down -120
zoom + = event.wheelDelta/12;
if (zoom> 0)
pic.style.zoom = zoom +'%'; / / re-set ratio
return false;
)

function limg () (
var zoom = parseInt (pic.style.zoom, 10) | | 100;
zoom + = zoom/12;
if (zoom> 0) (
pic.style.zoom = zoom +'%'; / / re-set ratio
return false;
)
)

function simg () (
var zoom = parseInt (pic.style.zoom, 10) | | 100;
zoom -= zoom/12;
if (zoom> 0) (
pic.style.zoom = zoom +'%'; / / re-set ratio
return false;
)
)
//-->
</ Script>
<img src=" Collection 1.jpg" border="0" onmousewheel="return bimg(this)">
<img src=" Collection 1.jpg" border="0"> <a href="#"> enlarge </ a> <a href="#"> narrow </ a>

</ Body>

</ Html>

---- Note: The above code uses the three functions, the first function is to control the zoom wheel, the second and the third is controlled by clicking the link.

1, parseInt () method is used to convert a string to integer numbers, which parseInt (xxx, 10), on behalf of the string into an integer, 10 representatives of the decimal, empathy and so on behalf of 8,16 and 16 octal ary

2, style.zoom property is primarily used for display elements of the zoom ratio

3, event.wheelData property onmousewheel event of a return to the direction that the mouse wheel scroll integer, the return value general type 120 or 120, a time when that wheel scroll up, scroll down negative said.

4, onmousewheel event that when the middle mouse wheel for scrolling notice.

分类:Web 时间:2010-08-01 人气:206
分享到:
blog comments powered by Disqus

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.198 (s). 12 q(s)