通过layui组件的滑动块实现控制图片放大缩小功能！
先看效果图
html 代码：创建滑块
<div id="slideys" class="demo-slider"></div>
//javascript 代码
var ysw = 0; //记录图片原始宽度
var ysh = 0; //记录图片原始高度
var setimgpath = "";
layui.use('slider', function(){
var $ = layui.$
,slider = layui.slider;
slider.render({
elem: '#slideys'
,value: 0 //初始值
,theme: '#1E9FFF'
,step: 1 //步长
,min: -10 //最小值
,max: 10 //最大值
,showstep: true //开启间隔点
,change: function(value){
if(ysw ==0 || ysh == 0){
return;
}
var pjw = ysw/20;
var pjh = ysh/20;
var img = $("#dximg"); //图片ID
if(img!=null){
var w = Math.round(ysw+(pjw*value));
var h = Math.round(ysh+(pjh*value));
$(img).css("width", w );
$(img).css("height", h );
}
}
});
});
目前此功能已经被做到我的工具网去了
查看地址:http://www.yzcopen.com/img/imgdx
通过layui组件的滑动块实现控制图片放大缩小功能！相关推荐
- 【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果 作品编号:Case007 软件版本:Axure9 作品类型:交互案例 原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
- html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
- js两只手指控制div图片放大缩小功能（2）
可以在github 上下载demo链接 https://github.com/fongdaBoy/hammer-pinch-master html代码 <!DOCTYPE html> &l ...
- js两只手指控制div图片放大缩小功能
可以在github 上下载demo链接 https://github.com/fongdaBoy/hammer-pinch-master html代码 <!DOCTYPE html> &l ...
- pycharm 用鼠标滑轮控制代码放大缩小的设置
pycharm 用鼠标滑轮控制代码放大缩小的设置 1.首先点击file选择settings 2.点击settings进入界面选择keymap 3.输入dec点击第一个 4.鼠标右击点击第二个 5. 按 ...
- 用鼠标滚轮滚动控制图片的缩小放大
转自:原文链接 尚未分析明白,先记录一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- 【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果 前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
- html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
一般来说,我们设定一定宽度高度的div标签,在里面放上图片,只有当图片大小尺寸符合这个宽度和高度的时候显示最佳.那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV ...
- html5手指滑动图片放大缩小,移动端如何实现图片通过捏合手势放大缩小呢？
/* * @Author 兔爷 * @function 实现单指拖动图片,双指缩放图片 * @marks 参数one是为了区分屏幕上现在是一根手指还是两根手指,因为在滑动的时候两根手指先离开一根会触发 ...
最新文章
- 中国电信打造“三朵云”战略 助力互联网+医疗发展
- 产品经理经常使用工具
- 【Network Security！】Linux中apt-get update和apt-get upgrade命令的区别
- C++ Primer 5th笔记（8）chapter8 类：IO库-流的状态
- 【django】关联查询
- UnityShader之Shader格式篇【Shader资料1】
- sql注入pythonpoco_.NET EF（Entity Framework）详解
- C# Dapper 简单实例
- 跟随器反馈回路电阻_如何将短反馈回路设置为单独编码器
- asp.net中获得客户端的IP地址
- MyCat分布式数据库集群架构工作笔记0003---Mycat的作用
- 三种主流快平台技术测评，你更青睐谁？
- 如何简单形象又有趣地讲解神经网络是什么
- 在 Python 中使用网格搜索和随机搜索进行超参数调整
- java中的前加加 和 后加加
- CuteFTP9.0安装，破解，服务器传递文件。
- 所属学院mid函数计算机学院,EXCEL答案公式==
- win10更新助手_快升级！win10精简版不到10G，比win7还干净流畅，无需更新！
- 实用Python程序设计测验:数字统计
- 搭建自己的服务器并且上传文件到自己的服务器上