基于jquery的鼠标滚动放大缩小图片

最新推荐文章于 2021-03-30 16:41:46 发布
最新推荐文章于 2021-03-30 16:41:46 发布
阅读量119 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/efshou/article/details/38940497
版权
一直以来都想写一个图片放大和缩小的小玩意，本来以为会很复杂，这几天自己思考了一下，原来是so easy啊。目前实现的放大缩小，主要时依据鼠标的滚轮触发事件来实现的，废话少说直接上源码。


<!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="Content-Type" content="text/html; charset=utf-8" />

<title>图片放大缩小</title>

<style type="text/css">

*{

margin:0; padding:0;

}

body { 

width:100%; height:100%; overflow:auto; 

}

#img {

display:block;

width:20%;

margin:20px auto;

cursor:-webkit-zoom-in;

cursor:-moz-zoom-in;

border:4px solid #ccc; 

}

</style>

<script src="./jquery/jquery-1.8.3.min.js"></script>   

<script type="text/javascript">

$(document).ready(function(){

var img=$("#img");

var i=0;

img.bind('DOMMouseScroll mousewheel  function(e) {

 var ev=window.event||e;//处理浏览器兼容性问题

  var scrollUnit=Math.max(-1,Math.min(1,(ev.wheelDelta||-ev.detail)));

  var newWith=Math.max(100,Math.min(1600,parseInt(img.css("width"))+(30*scrollUnit)))+"px";

img.css("width",newWith);

console.log(i++);

console.log(img.css("width"));

 

efshou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jquery的滚动鼠标放大缩小图片效果
10-28
基于jquery的滚动鼠标放大缩小图片效果，需要的朋友可以参考下。
jquery预览图片 鼠标滚动放大缩小 拖拽
weixin_58414196的博客
02-24 1697
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-2.1.2.min.js"></script> <style> </style> </head> <body> ...
jquery 鼠标滚轮实现图片缩放
热门推荐
不忘初心的博客
11-13 1万+
无标题文档 $(function(){ function zoomImg(o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += event.wheelDelta / 2; //可适合修改 if (zoom > 0) o.style.zoom = zoom + '%'; } $(document).ready(function(
图片使用鼠标移动和滚轮缩放js以及插件
知世故而不世故
02-07 4540
CSS页面（img标签必须含有此id） img id="imageFullScreen" src="" alt=""> JavaScript代码： $(document).ready(function() {//图片移动放大 需配合上面的js才生效 $('#imageFullScreen').smartZoom({ 'containerClass': 'zoo
js实现图片滚轮放大缩小以及鼠标拖动
king7136813的专栏
07-08 7359
主要功能：实现点击小图查看大图。 首先打开一个界面window.showModalDialog("<%=thisPath%>/jsp/showPic.jsp",dir,"dialogHeight:" + screen.height+ ";dialogWidth:" + screen.width+ ";help:no;status:no");将图片链接导入到页面中<%@ page language=
Jquery鼠标滚轮放大缩小图片
lovegonghui的专栏
11-10 8611
使用Jquery鼠标点击图片，划动鼠标滚轮放大缩小图片。 鼠标滚轮放大图片 img{ border:2px solid #000000; margin:10px; } body{ font-family:Verda
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
10-22
主要介绍了jQuery实现滚动鼠标放大缩小图片的方法,实例分析了jquery mousewheel插件实现鼠标事件响应及页面元素属性动态操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
基于jquery的滚动鼠标放大缩小图片效果 兼容火狐.zip
11-21
基于jquery的滚动鼠标放大缩小图片效果 兼容火狐.zip
js 鼠标滚动效果：图片放大缩小
全易
12-18 3276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
JQuery滚动鼠标放大缩小图片
weixin_34060741的博客
12-29 128
在项目制作过程中，遇到了这么一个需求，就开发了一个，记录一下。 首先，需要定义html元素和css样式： View Code &lt;div style="position:relative;"&gt; &lt;asp:Image ID="myImg" runat="server" Width="670px" /&gt; &
关于js鼠标滚轮放大缩小图片案例
wpz82864240的博客
01-17 1万+
var myimage =document.getElementById("WebVideoImg"); if (myimage.addEventListener) { // IE9, Chrome, Safari, Opera myimage.addEventListener("mousewheel", MouseWheelHandler, false); // Fire
jQuery 实现鼠标滚动图片 放大缩小
罗小文
03-30 1159
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="htt
前18大旋转修整器企业占据全球87%的市场份额.docx
05-06
前18大旋转修整器企业占据全球87%的市场份额
Planet-SkySat-Imagery-Product-Specification-Jan2020.pdf
05-06
SKYSAT IMAGERY PRODUCT SPECIFICATION PLANET.COM VIDEO Full motion videos are collected between 30 and 120 seconds by a single camera from any of the active SkySats. Videos are collected using only the Panchromatic half of the camera, hence all videos are PAN only. Videos are packaged and delivered with a video mpeg-4 file, plus all image frames with accompanying video metadata and a frame index file (reference Product Types below)
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
05-06
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
2019年A~F题特等奖论文合集.pdf
05-06
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，历年美赛特等奖O奖论文
雷达物位变送器安装和操作手册
05-06
雷达物位变送器安装和操作手册
node-v11.6.0-linux-armv7l.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python3实现快速排序（源代码）
05-06
快速排序是一种基于分治策略的排序算法，通过选择一个基准元素，将待排序的数组划分为两个子数组，一个包含所有小于基准的元素，另一个包含所有大于基准的元素，然后递归地对这两个子数组进行快速排序。快速排序在平均情况下具有O(n log n)的时间复杂度，是一种非常高效的排序算法。然而，在最坏情况下，当输入数据已经有序或接近有序时，快速排序的性能会退化为O(n^2)。此外，快速排序是不稳定的排序算法，即相等的元素可能在排序过程中改变相对位置。尽管如此，快速排序仍然因其高效的平均性能而在实际应用中广泛使用。在Python3中，可以通过递归或迭代的方式实现快速排序算法，但为了避免额外的空间开销，通常会采用原地排序的方式来实现。
jquery鼠标悬停图片放大
05-27
好的，关于您的问题，您可以使用 jQuery 实现鼠标悬停图片放大的效果。 具体实现的步骤如下： 1. 首先，需要准备好需要放大的图片，并设置好其尺寸。 2. 在 jQuery 中，使用 `.hover()` 方法来监听图片的鼠标移入和移出事件。 3. 在 `.hover()` 方法中，使用 `.animate()` 方法来实现图片的放大和恢复原尺寸的动画效果。 4. 在 `.animate()` 方法中，需要设置图片的宽度、高度、左边距和顶部距离等属性，从而实现图片的放大和缩小。 示例代码如下： ``` $(function() { $('.image').hover(function() { $(this).stop().animate({ width: '120%', height: '120%', marginLeft: '-10%', marginTop: '-10%' }, 400); }, function() { $(this).stop().animate({ width: '100%', height: '100%', marginLeft: '0', marginTop: '0' }, 400); }); }); ``` 其中，`.image` 是图片元素的类名，可以根据实际情况进行修改。在上述代码中，图片放大的动画时间为 400 毫秒，可以根据需要进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值