<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实现图片缩放效果的关键知识点: 1. **HTML结构**:首先,我们需要在HTML页面中嵌入图片元素,设置其初始大小,并为其添加一个容器,用于限制图片的显示区域。 ```html ``` ...
### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中,经常遇到的一个问题是确保图片能在不同设备、...通过上述方法,我们可以轻松实现图片的等比例缩放,使网页在各种设备上都能呈现出良好的视觉效果。
总结来说,用JavaScript实现图片切割效果需要理解HTML5 Canvas的使用,熟练掌握Canvas API,以及对用户交互的处理。通过这样的实例,我们可以提升Web应用的用户体验,创造更加生动和丰富的视觉效果。
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...
总结一下,"js图片缩放效果制作鼠标滚动图片等比例缩放"涉及到的技术点有: 1. JavaScript事件监听:监听鼠标的滚轮事件。 2. CSS3变换:使用`transform`属性进行等比例缩放。 3. 计算缩放比例:根据滚动的增量和...
在实现图片缩放功能时,我们通常会利用DOM(Document Object Model)来操作网页中的元素。DOM是HTML和XML文档的结构化表示,JavaScript可以通过DOM API来访问和修改页面上的元素,包括图片。首先,我们需要获取到...
在JavaScript编程领域,实现类似QQ的图片缩放功能是一项常见的需求,这主要涉及到网页的交互体验和图片处理技术。本文将详细讲解如何使用JavaScript来创建一个具有双击放大、滚轮缩放功能的图片查看器。 首先,我们...
有时候,我们希望图片能够自动适应不同的屏幕尺寸或布局,这时可以利用JavaScript实现图片的自动缩放功能。"javascript 图片自动缩放"是一个实用的技术,它可以帮助开发者确保图片在不同设备和分辨率下都能保持良好...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何使用jQuery实现图片的动态缩放功能,结合“张一山、周冬雨”这个形象化的例子,来...
JavaScript 和 ASP 图片缩放剪切技术是一种常见的前端与后端结合处理图像的方法,尤其在用户上传图片时,为了保持网站性能和用户体验,通常需要对图片进行预处理,包括缩放和剪切。这一技术可以应用于多种编程环境,...
在JavaScript中,我们可以利用DOM操作来改变地图元素的CSS属性,如`width`和`height`,或者通过调整图片的`transform`属性中的`scale`值来达到缩放效果。另外,为了保持地图的中心点不变,我们需要同时计算并更新...
本篇文章将深入探讨如何使用JavaScript实现这一功能,并提供一个基础实例。 首先,我们需要理解图片缩放和拖动的基本原理。图片缩放通常涉及调整图片的宽度和高度,而拖动则涉及到改变图片在页面上的位置。这两个...
本教程将详细讲解JavaScript和jQuery如何实现图片的自动缩放功能。 首先,我们需要理解JavaScript和jQuery的基础。JavaScript是一种在客户端运行的脚本语言,用于增加网页的交互性;jQuery是一个JavaScript库,它...
**CSS3鼠标hover背景图片缩放动画效果**是现代网页设计中一种常见的交互技术,它通过CSS3的特性实现背景图片在鼠标悬停时产生平滑的缩放效果,为用户带来更丰富的视觉体验和更直观的交互反馈。在本案例中,当用户将...
jquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口实现图片的缩放效果.rarjquery点击图片上的窗口...
在本项目中,"基于jQuery实现图片缩放tab切换效果.zip"是一个压缩包,它包含了一个使用jQuery库来实现图片缩放以及tab切换效果的示例。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作...
标题中提及的“JS 图片缩放效果代码”表明我们将会探讨一个使用JavaScript实现图片缩放效果的基础代码示例。尽管描述中提到代码的质量不是很高,但对于初学者来说是一个很好的起点。接下来,我们根据提供的部分代码...
利用JavaScript的动画功能,Zooming能够在图片缩放过程中提供流畅的视觉效果,提升用户的浏览感受。 4. **高清图像缩放**: 针对高分辨率的图片,Zooming能够有效地处理和展示,不会因为放大而导致图像质量下降。...
本项目通过JavaScript实现了这一功能,结合CSS样式,可以让用户在浏览器上实时预览并裁剪图片,大大提升了用户体验。以下是这个项目的核心知识点: 1. **HTML 结构**: 首先,`index.html`文件是页面的基础结构,...
总结来说,使用JavaScript实现Flash的图片显示效果,关键在于掌握Canvas绘图、CSS3动画、图片库的运用以及事件监听等技术。同时,还需要关注性能优化、兼容性和响应式设计,以确保在各种环境下都能提供出色的用户...