jQuery实现滚动鼠标放大缩小图片的方法_jquery_脚本之家

本文实例陈诉了jQuery达成滚动鼠标放大减少图片的点子。分享给大家供我们参照他事他说加以考察,具体如下:

在档次塑造进度中,蒙受了那样贰个需求,就支付了贰个,记录一下。

首先,须求定义html成分和css样式:

滚动鼠标中键,可以放大或者缩小图片

在这里个样式中,笔者设置了图片的体制为670px,目标便是防止图片过大的时候,突显到了页面外界的风貌。

jQuery实现滚动鼠标放大缩小图片的方法_jquery_脚本之家。接下来自个儿动用了一个jquery mousewheel
的插件来减轻鼠标中键的轮转难题,下边是现实的jquery操作代码:

$.ready { var count = 0; $("#ctl00_ContentPlaceHolder1_myImg").hover { 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 $.css({ 'position': 'absolute', 'left': left, 'top': top }); $.css; }, function() { //alert; $.css; }).mousewheel(function(event, delta, deltaX, deltaY) { count++; var height = $; //get initial height var 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 $.removeAttr; if  { //up $.attr("height", height + count * tempStep); $.attr("width", width + count * tempStep / stepex); } else if  { //down if  $.attr("height", height - count * tempStep); else $.attr; if (width > minHeight / stepex) $.attr("width", width - count * tempStep / stepex); else $.attr("width", tempStep / stepex); } event.preventDefault;

在此段代码中,利用了originalEvent函数来收获鼠标所处的职分,在IE9和firefox上边测量检验是足以运用的:

var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left positionvar top = e.originalEvent.y || e.originalEvent.layerY || 0; //get the top position

然后在代码中,笔者进行了如下的操作来分明图片的开端中度和宽窄以致图片展现的宽高比:

var height = $; //get initial height var width = $; // get initial widthvar stepex = height / width; //get the percentange of height / widthvar minHeight = 150; // min heightvar tempStep = 50; // every step for scrolling down or up$.removeAttr;

内部,tempStep首要是为了兑现滚动的时候,能够实行减少和加大的比率值。做了这件事后,作者移除了image的width样式,首假设为着促成放大也许减少。

if  { //up $.attr("height", height + count * tempStep); $.attr("width", width + count * tempStep / stepex);}else if  { //down if  $.attr("height", height - count * tempStep); else $.attr; if (width > minHeight / stepex) $.attr("width", width - count * tempStep / stepex); else $.attr("width", tempStep / stepex);}event.preventDefault();count = 0;

www.6766.com,上边这段就比较简单了,首固然实行上下滚动推断,然后等比例放大大概减少图片。event.preventDefault(卡塔尔国能够保险在滚动图片的历程中,页面不会跟着滚动。

越来越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery拖拽特效与本领计算》、《jQuery扩大手艺总计》、《jQuery习以为常杰出特效汇总》、《jQuery动漫与特效用法总计》、《jquery采纳器用法总括》及《jQuery常用插件及用法计算》

愿意本文所述对我们jQuery程序设计有所支持。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图