jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016-03-05 11:50
1006 查看
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery实现鼠标滑过图片移动特效
- jQuery实现鼠标滚动图片延迟加载效果附源码下载
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- jQuery实现的鼠标滑过弹出放大图片特效
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- jquery实现鼠标滑过后动态图片提示效果实例
- JQuery实现鼠标移动图片显示描述层的方法
- jQuery实现鼠标经过图片变亮其他变暗效果
- Jquery实现鼠标移动放大图片功能实例
- jQuery实现的感应鼠标悬停图片色彩渐显效果
- jQuery实现鼠标滑过预览图片大图效果的方法
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 微软无线镭射简报鲨8000激光笔记本鼠标 - (2)
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- 鼠标与“助手”的不解之缘