DHTML Zoom In and Out Script-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehouniao/article/details/288022

DHTML Zoom In and Out Script

View Live Demo

Using zoOom, you can zoom in and zoom out any image that is specified in the code.

zoOom is very easy to customise. You can change the image, it's position. You can also set the maximum and minimum allowable widths. You can change the zoom speed. For customising, make changes in the 'configure' section of the script.

Begin by pasting the following into the head of your script:

Select All Code

<script language="javascript">

// zoOom 1.0
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// premshree@hotmail.com
// Loaction of this script :
// http://www.qiksearch.com/javascripts/zooom10.htm
// Visit http://www.qiksearch.com/javascripts.htm for more FREE scripts


// Configure zoOom

//-----------------------------------------------------------------
var img_path="zooom10.gif"; // The Image Path                     |
var top_pos=130;          // Image position from top              |
var left_pos=162;         // Image position from left             |
var max_width=900;        // Max allowable width                  |
var min_width=10;         // Min allowable width                  |
var time_length=1;        // Zoom delay in milliseconds           |
var step=2;               // Pixels by which image should zoomm   |
//-----------------------------------------------------------------

document.write('<div id="q_div" style="position:absolute; top:' + top_pos + '; left:' + left_pos + '"><img src="' + img_path + '" border="3" bordercolor="#000000" name="z" alt="zoOom"></div>');

img_act_width=z.width;
img_act_height=z.height;
var original_time=time_length;

function zoom_out()
{
 if(z.width==0)
  {
   z.border=0;
  }
 if(z.width!=0)
  {
   if(z.width>min_width)
   {
    z.width-=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_out()",time_length);
   }
   else
   {
    window.alert('Width less than Minimum Width/n© Qiksearch zoOom.');
   }
  }  
} 

function zoom_in()
{
 if(z.width==0)
  {
   z.border=0;
  }
 if(z.width!=0)
  {
   if(z.width<max_width)
   {
    z.width+=step;
    z.height=Math.round(z.width*((img_act_height)/(img_act_width)));
    setTimeout("zoom_in()",time_length);
   }
   else
   {
    window.alert('Maximum Width exceeded/n© Qiksearch zoOom.');
   }
  }  
} 

function resume_zoom()
{
 time_length=original_time;
}

function pause_zoom()
{
 time_length=10000000000;
}

function set_original()
{
 z.width=img_act_width;
 z.height=img_act_height;
}

</script>

Now here are the buttons to control the image:

Select All Code

<!--BEGIN ZOOM LINKS-->
<table cellspacing="10" cellpadding="10" align="center"><tr>
<td style="border:3 solid #000000" align="middle"><a href="#" οnmοuseοver="javascript:resume_zoom();zoom_in();" οnmοuseοut="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">zoOom in</font> +</a></td>
<td style="border:3 solid #000000" align="middle"><a href="#" οnmοuseοver="javascript:resume_zoom();set_original();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#000000; text-decoration:none">original</a></td>
<td style="border:3 solid #000000" align="middle"><a href="#" οnmοuseοver="javascript:resume_zoom();zoom_out();" οnmοuseοut="javascript:pause_zoom();" style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:15pt; color:#003399; text-decoration:none"><font color="#808080">ZOoOM out</font> -</a></td>
</tr></table>
<!--END ZOOM LINKS-->