位置: 编程技术 - 正文

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

  • 递延所得税资产和递延所得税负债
  • 为改良生产线发生的变化
  • 油费补贴计入什么科目
  • 金税盘维护费全额抵扣冲减的管理费用怎样结转
  • 旅行社团队意识
  • 开票金额比实际金额多
  • 费用的增加会减值吗
  • 作为一个财务 月末要做什么
  • 已认证发票红冲进项税分录
  • 车辆挂靠收取管理费怎么做账
  • 外汇收不到会不会丢
  • 买一赠一使用规则
  • 工资薪金个税税率表
  • 个人独资企业出资额是注册资本吗
  • 营业收入与主营业务收入的区别与联系
  • 对公账户短信服务费怎么取消
  • 专业服务业政策
  • mac应用程序安装权限在哪找
  • wd discovery怎么安装
  • 在线测网速准吗
  • 购买原材料的运输费计入什么科目
  • 跨年退货会计处理
  • 车辆拍卖怎么过户
  • 如何将win11任务栏变小一点
  • 如何加强企业应收应付款管理论文
  • 公司报销额度是什么意思
  • php不能通过浏览器运行吗
  • 进项税额转出会造成增值税应纳税额
  • php依赖注入的三种方式
  • 圣诞节英文祝福语50字
  • 为什么增值税最后的负税人是消费者企业还要尽量少交税
  • 合伙企业个人所得税怎么算
  • 如何理解符合立案标准的,行政机关应当及时立案
  • 征税对象的具体项目
  • 公司没业务可以暂停营业吗
  • 电子承兑汇票到期怎么收款
  • 永续债利息可以扣除嘛
  • 怎样从对公账号查询账单
  • 单位食堂厨房设计方案
  • 帝国cms会员注册天数自动升级会员组
  • 更改sql server数据库名
  • mongodb 聚合
  • centos安装nmtui
  • mysql如何做优化
  • 挂靠的项目如何做账?
  • 增值税预缴的计税依据
  • 发票复核人一定要填吗
  • 租赁个人房屋租金怎么算
  • 企业清算未分配利润怎么交税
  • 购进商品发生溢余
  • 事业单位有奖励吗
  • 企业网银年服务费怎么做账
  • 投资损益科目
  • 农民扶贫款到哪去领
  • 长期借款工程验收会计分录怎么做
  • 记账凭证可以先做贷方吗
  • 拆除费计入哪个科目
  • 讲课费需要提供发票吗
  • 会计做账的凭据怎么写
  • sql高级语句实例
  • drop table select
  • Win10预览版怎么变回正式版
  • centos怎么执行脚本
  • dropbox windows
  • mac上的
  • scsiaccess.exe - scsiaccess是什么进程 有什么用
  • cortana小娜怎么用
  • jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
  • 批处理实现电脑登陆二次验证
  • 提取字符串的公式
  • c#程序例子
  • jquery validator
  • 深入学习习总书记系列讲话精神
  • jquery对话框组件
  • [置顶] [Android Studio 权威教程]Android Studio 三种添加插件的方式
  • 浙江税务打不开,提示新版本
  • 物业管理用房如何缴纳房产税
  • 北京市地方税务局2015第10号文件
  • 入职培训结束寄语
  • 房地产对外投资契税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设