web前端使用原生js实现图片滑轮滚动放大缩小

 <img id="bigimg" @mousewheel="zoomimg($event)" style="border:5px solid #fff;" src="" />

 // 缩放图片zoomimg(event) {var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {delta = event.wheelDelta / 120;if (window.opera) delta = -delta;} else if (event.detail) {delta = -event.detail / 3;}var img = document.getElementById('bigimg')if (delta > 0) {var width = img.width;img.width = width * 1.1;} else if (delta < 0) {var width = img.width;if (width > 400) {img.width = width * 0.9;}}},

web前端使用原生js实现图片滑轮滚动放大缩小相关推荐

web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
vue放大镜：滑轮滚动放大缩小，可直接使用，无需插件
需求:在vue中用js通过滑轮滚动实现放大缩小功能,此代码可直接使用效果: 代码: <template><div style="width:300px;height:30 ...
计算机二级web前端,web前端：原生js之Math对象
微软推出的Math工具提供了强大的数学工具,尤其适合学生和教师,可以帮助他们逐步解方程,更好的理解代数学.几何学.物理.化学和微积分等.Math的界面左侧被设计成一个计算机模型,右侧则是主要的显示区域 ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
怎么更好掌握Web前端技术？JS的跨域是怎么回事？
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...

web前端使用原生js实现图片滑轮滚动放大缩小

web前端使用原生js实现图片滑轮滚动放大缩小相关推荐

最新文章

热门文章