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中令你抓狂的魔术变量
Nov 30 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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
ftp类(myftp.php)
2006/10/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP进程同步代码实例
2015/02/12 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel下生成验证码的类
2017/11/15 PHP
js 操作select相关方法函数
2009/12/06 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
JS实现图片切换特效
2019/12/23 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
代理商会议邀请函
2014/01/27 职场文书
低碳环保演讲稿
2014/08/28 职场文书