jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)


Posted in Javascript onMarch 05, 2016

本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法。分享给大家供大家参考,具体如下:

在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下。

首先,需要定义html元素和css样式:

<div style="position:relative;">
<asp:Image ID="myImg" runat="server" Width="670px" />
<span style="position:relative;display:none; background:wheat;border:1px solid gray;padding:3px;overflow:hidden;" id="NotificationMsg">滚动鼠标中键,可以放大或者缩小图片</span>
</div>

在这个样式中,我设置了图片的样式为670px,目的就是避免图片过大的时候,显示到了页面外部的现象。

然后我使用了一个jquery mousewheel 的插件来解决鼠标中键的滚动问题,下面是具体的jquery操作代码:

<script type="text/javascript">
$(document).ready(function() {
  var count = 0;
  $("#ctl00_ContentPlaceHolder1_myImg").hover(function(e) {
      var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
      var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position
      $("#NotificationMsg").css({ 'position': 'absolute', 'left': left, 'top': top });
      $("#NotificationMsg").css("display", "block");
  }, function() {
    //alert('mouserout');
    $("#NotificationMsg").css("display", "none");
  }).mousewheel(function(event, delta, deltaX, deltaY) {
    count++;
    var height = $(this).attr("height");  //get initial height 
    var width = $(this).attr("width");   // get initial width
    var stepex = height / width;  //get the percentange of height / width
    var minHeight = 150;  // min height
    var tempStep = 50;  // evey step for scroll down or up
    $(this).removeAttr('style');
    if (delta == 1) { //up
      $(this).attr("height", height + count * tempStep);
      $(this).attr("width", width + count * tempStep / stepex);
    }
    else if (delta == -1) { //down
      if (height > minHeight)
        $(this).attr("height", height - count * tempStep);
      else
        $(this).attr("height", tempStep);
      if (width > minHeight / stepex)
        $(this).attr("width", width - count * tempStep / stepex);
      else
        $(this).attr("width", tempStep / stepex);
    }
    event.preventDefault();
    count = 0;
  });
});
</script>

在这段代码中,利用了originalEvent函数来获取鼠标所处的位置,在IE9和firefox下面测试是可以使用的:

var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position

然后在代码中,我进行了如下的操作来确定图片的初始高度和宽度以及图片显示的宽高比(目的是实现等比例缩放):

var height = $(this).attr("height");  //get initial height 
var width = $(this).attr("width");   // get initial width
var stepex = height / width;  //get the percentange of height / width
var minHeight = 150;  // min height
var tempStep = 50;  // every step for scrolling down or up
$(this).removeAttr('style');

其中,tempStep主要是为了实现滚动的时候,能够进行缩小和放大的比率值。做了这之后,我移除了image的width样式,主要是为了实现放大或者缩小。

if (delta == 1) { //up
  $(this).attr("height", height + count * tempStep);
  $(this).attr("width", width + count * tempStep / stepex);
}
else if (delta == -1) { //down
  if (height > minHeight)
    $(this).attr("height", height - count * tempStep);
  else
    $(this).attr("height", tempStep);
  if (width > minHeight / stepex)
    $(this).attr("width", width - count * tempStep / stepex);
  else
    $(this).attr("width", tempStep / stepex);
}
event.preventDefault();
count = 0;

上面这段就比较简单了,主要是进行上下滚动判断,然后等比例放大或者缩小图片。event.preventDefault()可以保证在滚动图片的过程中,页面不会随之滚动。

下面附上这个插件:

点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javascript 实现map集合
Apr 03 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
jQuery实现简单全选框
Sep 13 jQuery
js控制TR的显示隐藏
Mar 04 #Javascript
Node.js操作Firebird数据库教程
Mar 04 #Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 #Javascript
node.js微信公众平台开发教程
Mar 04 #Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 #Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 #Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 #Javascript
You might like
终于听上了直流胆调频
2021/03/02 无线电
谈谈新手如何学习PHP
2006/12/23 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php获取系统变量方法小结
2015/05/29 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python实现PID算法及测试的例子
2019/08/08 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
学生档案自我鉴定
2013/10/07 职场文书
业务员岗位职责范本
2013/12/15 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
电钳工人个人求职信
2014/05/10 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
学校师德师风整改措施
2014/10/27 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
go设置多个GOPATH的方式
2021/05/05 Golang