js图片按指定比例缩放代码

js图片按指定比例缩放代码是非常实用的,我们主要是在网页面显示时会看到,如是一张图片大太了,所以得按比例进行处理了,下面的代码就是这个功能。
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>onMouseWheel</TITLE>

<SCRIPT>
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta <= -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
oCounter.innerText = count + '0%';
}
</SCRIPT>

</HEAD>
<BODY>
<div align=center>
<span style="font-weight:bold">Size =
<span id="oCounter" style="color:red;">100%</span></span>
<img id="oImage" src="www.111cn.net/aaa.gif" onmousewheel="return Picture();" >
</div>
</BODY>
</HTML>

时间: 2024-10-22 11:01:28

js图片按指定比例缩放代码的相关文章

js图片按比例缩放代码

js图片按比例缩放代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jjs图片按比例缩放代码</title> <script language="javascript教程">  //图片按比例缩放 var flag = false; function DrawIm

php实现图片等比例缩放代码_php技巧

新建文件index.php,需要在统计目录下有个图片为q.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="q.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h); $img=imagecreatefromjpeg($fi

javascript实现图片等比例缩放代码

 代码如下 复制代码 //设置图片自动调整  function   SetImgSize(pimg,iw,ih)   {   //pimg对象,iw缩略图宽度,ih缩略图高度    var   img   =   new   Image();     img.src = pimg.src;       var   w   =   iw;       var   h   =   ih;          if(img.width>0 && img.height>0)    {  

CSS图片等比例缩放代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

js图片轮播效果实现代码_javascript技巧

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给它添

js图片卷帘门导航菜单特效代码分享_javascript技巧

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re

js图片连续向左滚动代码

提示:您可以先修改部分代码再运行 js图片连续向左滚动代码 说明一 说明二 说明三 说明四 说明五 提示:您可以先修改部分代码再运行

js兼容ie ff ie8 图片等比例缩放代码

 代码如下 复制代码 <!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 http-equiv=&qu

JS图片无缝、平滑滚动代码

 这篇文章主要介绍了JS图片无缝.平滑滚动的实现,需要的朋友可以参考下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用.   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-