位置: 编程技术 - 正文

jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)(jquery 获取滚动距离)

编辑:rootadmin

推荐整理分享jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)(jquery 获取滚动距离),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery 滚轮滑动事件,jquery设置滚动条,jquery滚动事件,jquery设置滚动条到底部,jquery div滚动条,jquery设置滚动条到底部,jquery div滚动条,jquery设置滚动条到底部,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

在这段代码中,利用了originalEvent函数来获取鼠标所处的位置,在IE9和firefox下面测试是可以使用的:

jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)(jquery 获取滚动距离)

然后在代码中,我进行了如下的操作来确定图片的初始高度和宽度以及图片显示的宽高比(目的是实现等比例缩放):

其中,tempStep主要是为了实现滚动的时候,能够进行缩小和放大的比率值。做了这之后,我移除了image的width样式,主要是为了实现放大或者缩小。

上面这段就比较简单了,主要是进行上下滚动判断,然后等比例放大或者缩小图片。event.preventDefault()可以保证在滚动图片的过程中,页面不会随之滚动。

下面附上这个插件:

点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

JavaScript中利用jQuery绑定事件的几种方式小结 开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:先写几个好看的button//引入JQueryscripttype="text/javascript"src="jquery-1.8.3.min.js"/scriptspanid="tips"/s

使用jQuery或者原生js实现鼠标滚动加载页面新数据 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样

不定义JQuery插件 不要说会JQuery 一、导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人,直到

标签: jquery 获取滚动距离

本文链接地址:https://www.jiuchutong.com/biancheng/383047.html 转载请保留说明!

上一篇:简单的jQuery banner图片轮播实例代码(简单的智能家居)

下一篇:JavaScript中利用jQuery绑定事件的几种方式小结(jq 使用)

  • 收到个税手续费退费会计分录
  • 职工福利费计税税率
  • 增值税发票确认平台怎么认证发票
  • 领用库存商品用于固定资产
  • 会计核算程序的含义
  • 税额为零的增值税是多少
  • 收据大写十万元整怎么写标准
  • 前一年的发票第二年改抬头
  • 生产型企业出口退税计算公式
  • 购货方付款会计分录
  • 预付款核销会计分录
  • 转登记为小规模纳税人未抵扣的进项税额
  • 资产减值准备的税务处理
  • 合伙企业缴纳税款时间
  • 专用设备抵免企业所得税目录
  • 个人租车给公司租金多少合适
  • 国外进口的食品还能吃吗
  • 小规模纳税人专票如何申报
  • 消费税的纳税义务人
  • 企业收取的延期付款利息需要征消费税和增值税
  • 固定资产残值率计算公式
  • 提供加工服务的企业
  • 厂房租金计入什么费用部门
  • 鸿蒙工具箱使用视频
  • 光纤测速网速测试
  • thinkphp 3.2.3 getshell
  • php面向对象优点,缺点
  • linux模块的概念
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • 债劵利息怎么计算
  • 存货盘亏能否税前扣除
  • linux双ip路由设置方法
  • 免征个人所得税33种情形
  • thinkphp5上传图片
  • 当月已验旧的发票怎么开
  • 差额征税怎么交税
  • 图像分类实战
  • typescriptlang
  • 出纳记账凭证怎么写
  • 现金流出包括所有股票吗
  • 织梦改logo
  • 织梦cms怎么样
  • python中myqr的用法
  • 税负率包含哪些税种
  • 费用分割单使用范围
  • 金税盘减免税款月末如何结转
  • 购买金税盘是全额抵扣吗
  • 个税 全年累计
  • 开专用发票可以直接写加工费这个明细吗?
  • 厂房无偿使用交税吗
  • 企业常用会计科目表及其解释
  • 现金折扣是啥
  • 挂靠单位无理要求提供增值税发票怎么办?
  • 房地产企业预缴土地增值税
  • 企业购买房产怎么记账
  • 长期股权投资如何入账
  • 贷款服务的利息怎么算
  • 工会经费的减除项是什么
  • 公司现金支票取钱需要带什么资料
  • sqlserver全文索引ndf文件丢失
  • mysql在mac上的安装教程
  • win8打开屏幕键盘
  • 无法将此电脑升级到最新版本的windows10
  • 安装win7需要激活吗
  • 桌面开始菜单跑到右边去了怎么办
  • unity3d第一人称射击游戏教程
  • android开发mvc mvp mvvm
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • opengl快速入门
  • android自定义属性详解
  • js 字符编码
  • NGUI之UILocalize
  • android support包
  • 有哪些推荐阅读的书
  • 人事科负责人是否必须是党员?
  • 辽宁国家税务局公务员职位2023
  • 请问各位专家金线吊乌龟有什么功效
  • 税务蓝和电信蓝一样吗
  • 注册税务师考试时间2024
  • 灵活就业登记审核查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设