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.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of JS achieve image zoom

  • JavaScript String Functions Guinness

    Own JS function 1.Asc (x), Chr (x): convert characters, character code 2. Filter: Search string array of a specific string Format: v = filter (x, s [, include [, compare]]) Examples: Dim x ()={" kjwang "," wangkj "," peter ")

  • js page Jump implementation of a number of ways

    The first is: <script language="javascript" type="text/javascript"> window.location.href = "login.jsp? backurl =" + window.location.href; </ script> The second: <script language="javascript"> alert

  • EJB ant script to deploy template works

    <? xml version = "1.0" encoding = "UTF-8"?> <! - Name Project name basedir build.xml file directory -> <project name="HelloWorld" basedir="."> <! - Property variables -> <! - The sour ...

  • Dynamic loading JS script four kinds of methods

    To achieve dynamic loading JS script has four kinds of methods: 1, direct document.write <script language="javascript"> document.write ( "<script src='test.js'> <\ / script>"); </ script> 2, dynamic scri

  • java read file

    java read documents in two ways: java.io and java.lang.ClassLoader When using the java.io, when java.lang.ClassLoader use it? (Note: If prior to read xml file java read file clearly aware of these two methods have been like! Can take much less to understa

  • WebQQ, ExtJs + Servlet + Hibernate + Spring implementation

    Code for the development of boredom when using ExtJs + Servlet + hibernate (Ant + xdoclet generate HBM files) + spring implementation, Pure whim, but implementation has been more than chat, group chat, what's not achieve, nor how to consider the perfo

  • spring + hibernate + oracle9i to read and write CLOB

    Database-driven update classes12-9i.jar Hibernate modify the configuration of the following code <bean/> <bean Lazy-init="true"> <property name="nativeJdbcExtractor"> <ref local="nativejdbcExtractor"/>

  • Process migration from tomcat to websphere changes

    Process migration from tomcat to websphere changes Because customers use the web application server software used by different what tomcat5, tomcat6, websphere5.1, websphere6.1, weblogic8, and so on, and the software used inconsistent standards, ibm's

  • The level Hibernate cache

    Hibernate cache level: (1) a cache is very short and the session life cycle consistent, also known as session-level cache-level cache or transaction-level cache (2) Ways of Supporting level cache: get (); load (); iterator (); only entity object cach ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries