鼠标滚动缩放图片效果

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量88 收藏
点赞数
文章标签： javascript ViewUI

 前段时间本人在做项目时，做了一个鼠标滚动缩放图片效果，图片支持多个，多个图片循环缩放，花了点时间整理了下，把它贴出来，与大家分享下，在ie6.0,ie7.0,firefox都测试过，没有问题。

<html>

<head>
<title>鼠标滚动图片缩放</title>
<script language="javascript">
      if (window.addEventListener)
      {
         window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
      }
      
      function wheel(event)
      {
         return wheelimg(event);
      }
      function bbimg()
      {
         var div = document.getElementById("div1");
         var allImg = div.getElementsByTagName("IMG");
         for(i=0;i<allImg.length;i++)
             {
               var zoom=parseInt(allImg[i].style.zoom, 10)||100;
               zoom+=event.wheelDelta/12;
               if (zoom>0) allImg[i].style.zoom=zoom+'%';
             }
       }
        
       function wheelimg(event)
       {
        var delta = 0;
        var div = document.getElementById("div1");
        if (event.detail)
        {
            //如果是firefox
            var allImg = div.getElementsByTagName("IMG");
            var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
            for(i=0;i<allImg.length;i++)
             {
                   isThis=true;
                   allImg[i].width=allImg[i].width+event.detail*12;
                event.returnValue = false;
             }
             
         }
          return true;
        }
    </script>
</head>
<body  onmousewheel="bbimg()">
    <form id="form1" runat="server">
        <div id="div1">
         <img id="wheelimg" src="http://farm3.static.flickr.com/2782/4098845549_fe43958798.jpg" style="cursor: pointer;" border="0" />
         <img id="wheelimg1" src="http://farm3.static.flickr.com/2448/4099603568_69b7811d55.jpg" style="cursor: pointer;" border="0" />
        </div>
    </form>
</body>
</html>
weixin_33805992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js拖动滚动带有图片放大缩小特显效果
07-03
js拖动滚动带有图片放大特显效果
React中监听鼠标滚轮事件
热门推荐
逸尘的专栏
08-29 1万+
const rdom = require('react-dom'); class Hello extends React.Component { render() { handleScroll(e) { const ele = rdom.findDOMNode(this); if (e.nativeEvent.deltaY &amp;amp;lt;= 0) { /* s...
Halcon MFC混合编程-图像显示随鼠标滚动放大缩小
04-25 2968
http://blog.csdn.net/bettyshasha/article/details/51660062
图片随鼠标的滚动进行缩放
weixin_39366606的博客
08-28 2019
window.onload=function()//用window的onload事件，窗体加载完毕的时候    {     //全景图随鼠标的滚动进行缩放    var fullImg = document.getElementById("fullImg");    if (fullImg.addEventListener) {              // IE9, Chrome, Safar...
js图片缩放效果制作鼠标滚动图片等比例缩放
11-18
在网页设计中，动态的图片展示效果可以提升用户体验，其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能，来实现图片随着页面滚动而优雅地...
js实现鼠标滚轮控制图片缩放效果的方法
10-24
主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery鼠标滚动缩放效果代码.rar
07-05
在【JS特效-鼠标特效】这个领域，jQuery鼠标滚动缩放效果是一种高级交互设计，当用户滚动鼠标滚轮时，网页上的某些元素（如图片、图表或整个页面）会根据滚动方向进行放大或缩小。这种效果能够使用户在浏览网页时有...
鼠标滚动图片缩放
09-30
在IT领域，鼠标滚动图片缩放是一项常见的交互设计技术，尤其在图像查看、网页浏览以及图形编辑软件中广泛应用。这项技术允许用户通过鼠标滚轮轻松地放大或缩小图片，提高用户体验，特别是在处理大量细节或者查看高...
基于jquery的滚动鼠标放大缩小图片效果
10-28
最后，为了更好地展示效果，通常会创建一个在线演示（DEMO），让用户可以直接在网页上看到滚动鼠标放大缩小图片的实际运行情况，如文章中提到的"滚动鼠标放大缩小图片效果"链接。 总结来说，这个基于jQuery的滚动...
图片在鼠标位置以数遍滚轮滚动放大缩小
❤的博客
04-08 957
图片在鼠标位置以数遍滚轮滚动放大缩小 1、元素距离浏览器左边的间距求解` getOffsetLeft: function(obj) { var tmp = obj.offsetLeft; var val = obj.offsetParent; while (val != null) { tmp += val.offsetLeft; ...
React 鼠标滚轮事件
忘川
03-25 6008
js handleScroll(e) { const ele = rdom.findDOMNode(this); if (e.nativeEvent.deltaY <= 0) { if (ele.scrollTop <= 0) { e.preventDefault(); console.log("up"); }...
react 实现图片的滚动缩放和按住鼠标左键移动图片效果
北京欢迎您
07-16 3055
在react项目 按住鼠标左键移动图片效果 html（jsx）中 <img className='zoomImg' onDragStart={this.handleStopDrag} onMouseDown={(e) => { e.persist(); this.handleDrag(e) }} /> handleDrag事件 handleD...
鼠标滚轮实现图片缩放
一树菩提一烟霞的博客
06-13 2683
鼠标滚轮实现图片缩放
Next.js静态导出与动态路由优化
天涯学馆
07-20 1047
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 388
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 799
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 979
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 983
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
实现鼠标滚轮控制图片缩放效果的代码
06-08
可以使用以下代码实现鼠标滚轮控制图片缩放效果： ```javascript // 获取图片元素 var img = document.getElementById("myImg"); // 设置初始缩放比例 var scale = 1; // 监听鼠标滚轮事件 img.addEventListener...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值