位置: 编程技术 - 正文

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 使用)

  • 公司支付的房租押金怎么入账
  • 印花税的征税范围具体有哪些
  • 收到项目投资款账务处理
  • 普票销项负数发票
  • 施工排水费是否属于措施费
  • 国外公司税号查询
  • 农产品的收购价格
  • 销货方违规作废增值税专用发票怎么处理
  • 付汇代扣代缴增值税纳税期限
  • 报废物资收入计入什么科目旧准则
  • 劳务报酬算公积金基数吗
  • 建筑工程的适用范围
  • 发票认证勾选是一回事吗
  • 印花税滞纳金计算方法
  • 应交税费借方余额填列资产负债表
  • 个税系统数据没有备份怎么办
  • 行政罚款计入什么会计科目
  • 贷款呆账处理了多长时间恢复征信
  • 跨地区经营建筑企业预缴增值税
  • 分支机构增值税汇总纳税怎么申报?
  • 个税经营所得申报常见问题答疑
  • 股权变更需要缴纳印花税吗,缴纳多少
  • 以前年度应收账款错误如何调整
  • 费用怎么冲销
  • 购入研发设备
  • 货款形式返还
  • echarts饼图背景图片
  • 基于thinkphp的学园招聘系统项目源代码
  • 得了遗尿症应该怎么办
  • 圣托里尼岛游玩攻略
  • PHP/HTML混写的四种方式总结
  • 预提费用的分录
  • 办公用品属于会计科目中的什么
  • 残保金政策建议
  • 实收资本印花税税率多少
  • cityscape dataset
  • html渐变色背景
  • vue父子组件传值
  • 报废机器设备如何缴纳增值税
  • 7z命令行详解
  • 为什么股本溢价
  • 房企预缴增值税
  • 印花税申报的流程有哪些
  • 小企业会计准则没有以前年度损益调整科目
  • 新准则下开办费摊销
  • sql2008强制还原数据库
  • 管理费用的会计要素
  • 退货给谁
  • 企业收取的丢失物品
  • 文化事业建设费计入什么科目
  • 公司为小规模纳税人
  • 工程中标费用放哪个科目
  • 资产评估增值的税务处理
  • 私立医院怎么做不被骗的事情
  • 取得资产需要付出成本吗
  • 电子税务局自然人扣缴客户端
  • 预收账款占销售收入比例预警值为比例大于
  • 收到融资租赁发票要交印花税吗
  • 各单位应当根据需要设立专职或者兼职
  • cndll.dll
  • windows10version1909的10累积更新失败
  • 如何避免系统性风险
  • linux0.11文件系统
  • 从五方面解析Linux防火墙框架问题
  • win8.1系统更新
  • Windows8 PrintScreen屏幕截图如何保存到桌面上
  • linux cpan
  • shell for循环执行命令
  • 浏览器窗口上线怎么办
  • jquery.form
  • nodejs集成sqlite使用示例
  • unity鼠标控制物体移动
  • bootstrapped 5%
  • 如何查询个体工商户是查账征收还是核定征收
  • 纳税人虚假纳税申报
  • 10%加计抵减政策条件
  • 福建省国税局官网
  • 电子税务局房产税原值怎么改
  • 房子的地税发票丢了怎么补办
  • 甘肃省国家税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设