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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 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 操作文件的一些FAQ总结
2009/02/12 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
速记Python布尔值
2017/11/09 Python
python距离测量的方法
2018/03/06 Python
Python列表切片常用操作实例解析
2019/12/16 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Python实现异步IO的示例
2020/11/05 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
小学家长学校培训材料
2014/08/24 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
员工工作表扬信
2015/05/05 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
JavaScript流程控制(分支)
2021/12/06 Javascript