`

Javascript实现图片缩放效果

阅读更多
<script language="javascript">
function setZoom(img, dir, width, height, margin, zIndex, delay) {
  setTimeout(function() {
    if (img.dir==dir) {
      img.style.width=width;
      img.style.height=height;
      img.style.margin=margin;
      img.style.zIndex=zIndex;
      img.parentNode.parentNode.style.zIndex=zIndex;
    }
  }, delay);
}

function larger(img, width, height) {
  img.dir='rtl';
  now=parseInt(img.style.zIndex);
  for (i=now+1; i<=10; i++) {
    w=(width*(10+i))/20+'px';
    h=(height*(10+i))/20+'px';
    m=(-i)+'px 0 0 '+(-width*i/40)+'px';
    setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
  }
}

function smaller(img, width, height) {
  img.dir='ltr';
  now=parseInt(img.style.zIndex);
  for (i=now-1; i>=0; i--) {
    w=(width*(10+i))/20+'px';
    h=(height*(10+i))/20+'px';
    m=(-i)+'px 0 0 '+(-width*i/40)+'px';
    setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
  }
}
</script>

<img class="preview" style="width:80px;height:63px;z-index:0" src="http://www.iteye.com/upload/logo/user/14515/a32a5778-0f01-3773-b4df-10ba883cb872.png?1203053389" alt="蕲春人" title="www.20zone.cn" onmouseover="larger(this,160,127)" onmouseout="smaller(this,160,127)" />
分享到:
评论

相关推荐

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    JavaScript实现网页图片等比例缩放 JS效果 JS效果特效 图片等比例缩放

    js实现鼠标滚轮控制图片缩放效果的方法

    主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    jquery点击图片上的窗口实现图片的缩放效果.rar

    jquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口...

    javascript拖拉缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。 跟拖放效果一样,...

    JavaScript实现拖拽和缩放效果

    本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码,供大家参考,具体内容如下

    javascript经典效果示例

    38:___图片拖拉缩放效果(仿PHOTOSHOP) 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果,像光照一样 44:___在...

    JavaScript 图片切割效果(带拖放、缩放效果)

    这个程序主要分三部分:层的拖放、...其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单。 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西。

    【JavaScript源代码】Vue3实现图片放大镜效果.docx

    Vue3实现图片放大镜效果  本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 &lt;template&gt; &lt;div class="goods-image"&gt; &lt;!-- 大图容器 --&gt;  class="large" :...

    jquery实现图片滚动并放大效果.rar

    jquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rar

    JavaScript 图片切割效果

    近来我把其中的拖放效果和缩放效果单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统。 先看...

    JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

    主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下

    Js图片裁切、图片拖放和缩放实例.rar

    JavaScript实现的图片裁切、拖放、图片缩放特效,还不错的效果吧,可用于头像裁切等,鼠标或勾出选框,右侧适时显示所选区域的图像,网上类似的应用已经有很多啦。

    程序天下:JavaScript实例自学手册

    14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...

    原生JS实现大图片按比例缩放.zip

    原生JS实现大图片按比例缩放是一款原生JavaScript制作网页div里面大图片按比例缩放排列。

    《程序天下:JavaScript实例自学手册》光盘源码

    14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...

    JavaScript 图片切割效果(放大镜)第1/4页

    近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小js资源

    js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...

    javascript 实现的完全兼容鼠标滚轴缩放图片的代码

    以前看到的都是用IE的zoom,所以非IE就不支持,昨天看到这个js中鼠标滚轮事件详解 ,于是完全兼容(IE6-8,FF,Chrome,Opera,Safari)的鼠标滚轴缩放图片效果今天就诞生了

Global site tag (gtag.js) - Google Analytics