足球游戏_中国足彩网¥体育资讯$

jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
来源:易贤网 阅读:1691 次 日期:2016-08-02 15:19:59
温馨提示:易贤网小编为您整理了“jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)”,方便广大网友查阅!

本文实例讲述了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程序设计有所帮助。

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标