频道栏目
首页 > 安全 > 系统安全 > 正文

怎么样通过jQuery实现滚动鼠标放大缩小图片

2016-10-09 09:53:18           
收藏   我要投稿

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

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

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

style="position:relative;">

ID="myImg" runat="server" Width="670px" />

style="position:relative;display:none; background:wheat;border:1px solid gray;padding:3px;overflow:hidden;" id="NotificationMsg">滚动鼠标中键,可以放大或者缩小图片

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

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

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;

});

});

在这段代码中,利用了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()可以保证在滚动图片的过程中,页面不会随之滚动。

相关TAG标签 jQuery 滚动鼠标
上一篇:如何使用Zend Framework动作助手Redirector
下一篇:解决电信网通封锁路由以及上网机器台数的破解方法
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站