<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实现网页图片等比例缩放 JS效果 JS效果特效 图片等比例缩放
主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口...
拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。 跟拖放效果一样,...
本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码,供大家参考,具体内容如下
38:___图片拖拉缩放效果(仿PHOTOSHOP) 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果,像光照一样 44:___在...
这个程序主要分三部分:层的拖放、...其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单。 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西。
Vue3实现图片放大镜效果 本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> class="large" :...
jquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rarjquery实现图片滚动并放大效果.rar
近来我把其中的拖放效果和缩放效果单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考图片切割系统。 先看...
主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下
JavaScript实现的图片裁切、拖放、图片缩放特效,还不错的效果吧,可用于头像裁切等,鼠标或勾出选框,右侧适时显示所选区域的图像,网上类似的应用已经有很多啦。
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
原生JS实现大图片按比例缩放是一款原生JavaScript制作网页div里面大图片按比例缩放排列。
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
以前看到的都是用IE的zoom,所以非IE就不支持,昨天看到这个js中鼠标滚轮事件详解 ,于是完全兼容(IE6-8,FF,Chrome,Opera,Safari)的鼠标滚轴缩放图片效果今天就诞生了