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 相关文章推荐
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
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
php广告加载类用法实例
2014/09/23 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Django中使用group_by的方法
2015/05/26 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python实现图片文件批量重命名
2020/03/23 Python
tensorflow更改变量的值实例
2018/07/30 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python cookie反爬处理的实现
2020/11/01 Python
EJB的激活机制
2013/10/25 面试题
MySQL面试题目集锦
2016/04/14 面试题
个人简历的自荐信
2013/10/23 职场文书
技校个人求职信范文
2014/01/25 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
交通安全标语
2014/06/06 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL