@layui官网文档、@参考博客

参考博客中能实现，但是效果差强人意，在前辈的基础上进行了改造，并支持了动态多图列表

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link rel="stylesheet" href="layui/css/layui.css">

<%--展示图片列表  --%>

<c:forEach items="${imgList }" var="img" varStatus="index">

	<fieldset class="layui-elem-field">

	  <legend><button>删除</button></legend>

	  <div class="layui-field-box">

	  	<div id="slideys${index.index }" class="demo-slider"></div>

	  	<%--用于展示。此处的src请替换成个人实际使用的src --%>

	  	<img id="dximg${index.index }" style="min-width: 100px; min-height: 20px" src="<%=basePath %>imagePath/${img.imgName}" alt="图片缺失"/>

	  	<%--用于缩放参考 --%>

	  	<img id="dximgHidden${index.index }" src="<%=basePath %>imagePath/${img.imgName}" style="display: none;"/>

	  </div>

	</fieldset>

</c:forEach>

<c:if test="${imgList==null or fn:length(imgList) ==0}">

	<fieldset class="layui-elem-field">

	  <legend>无图片</legend>

	  <div class="layui-field-box">

	  </div>

	</fieldset>

</c:if>

<script src="layui/layui.js"></script>

<%--此处必须用循环，否则slider将不能正常使用。比如for循环出来的，k值总是比最大的还大1 --%>

<c:forEach items="${imgList }" var="img" varStatus="index">

<script type="text/javascript">

layui.use(['element','slider','jquery','layer'], function(data){

	var $ = jQuery = layui.$, element = layui.element ,slider = layui.slider,layer=layui.layer;

	var k=${index.index};//循环的索引，辅助匹配对应的元素

	 slider.render({

			 elem: '#slideys'+k

			 ,value: 0 //初始值

			 ,theme: '#1E9FFF'

			 ,step: 1 //步长

			 ,min: -10 //最小值

			 ,max: 10 //最大值

			 ,showstep: true //显示间隔点

			 ,tips:false

			 ,change: function(value){

			　　　　　　console.log(value);

			　　　　　　var imgHidden =  $("#dximgHidden"+k);  //隐藏的图片ID，辅助用

			　　　　　　var img =  $("#dximg"+k);  //图片ID

			　　　　　　var ysw = parseInt(imgHidden.css('width'));   //记录图片原始宽度

			　　　　　　var ysh = parseInt(imgHidden.css('height'));   //记录图片原始高度

			　　　　　　var pjw = ysw/10;

	             　　　　　　　　var pjh = ysh/10;

	             　　　　　　　　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 ); 

	          	 　　　　　　}

	      	 　　　　}

		});

});

</script>

</c:forEach>

　　效果图如下

图片缩放——利用layui的滑块的更多相关文章

  1. ios 利用UIScrollView实现图片缩放

    前言:我们希望做出的效果是,实现图片的分页滑动,且每张图片都可以双击或用手指捏合来缩放大小.上一篇讲解UIGestureRecognizer的中,我们介绍的UIPinchGestureRecogniz ...

  2. UISlider显示进度(并且实现图片缩放)

    图片展示效果如下: 其他没什么好说的,直接上代码: RootView.h: #import <UIKit/UIKit.h> @interface RootView : UIView @pr ...

  3. CSS实现图片缩放特效

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...

  4. HTML5 图片缩放功能

    腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...

  5. PHP图片裁剪_图片缩放_PHP生成缩略图

    在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...

  6. iOS开发UI篇—UIScrollView控件实现图片缩放功能

    iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...

  7. Android图片缩放方法

    安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...

  8. Android安卓开发中图片缩放讲解

    安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...

  9. Asp.net 实现图片缩放 无水印（方法一）

    /// <summary> /// 图片缩放 无水印 /// </summary> /// <param name="sourceFile">图 ...

随机推荐

  1. Spring Boot MyBatis 通用Mapper 自动生成代码

    一.在pom.xml文件中进入mybatis自动生成代码相关的jar包: 注意: <configurationFile>标签中配置的是“generatorConfig.xml”文件位置. ...

  2. 多线程实现的方式二实现Rannable

    package thread; class Thread2 implements Runnable{ private String name; public Thread2(String name) ...

  3. python的种类有哪些？

    CPython 当我们从Python官方网站下载并安装好Python 3.6后,我们就直接获得了一个官方版本的解释器:CPython.这个解释器是用C语言开发的,所以叫CPython.在命令行下运行p ...

  4. Yarn节点及作用

    1.yarn中的角色:ResourceManager.NodeManager.ApplicationMaster. ResourceManager:集群计算资源的分配,启动ApplicationMas ...

  5. 四大网络VGGNet

    一.特点 1.对AlexNet改进,在第一个卷积层用了更小的卷积核和stride 2.多尺度训练(训练和测试时,采用整张图的不同尺度) 由此,VGG结构简单,提取特征能力强,应用场景广泛 由单尺度测试 ...

  6. Storage事件及综合案例

    说到Storage事件,那么就得先给大家说一下localstorage和sessionstorage: 1.localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. ...

  7. 学到了林海峰,武沛齐讲的Day34 完 线程 进程 协程 很重要

    线程 进程 协程 很重要 ...儿子满月回家办酒,学的有点慢,坚持

  8. svg坐标转换

    本文内容转自 how-to-translate-from-dom-to-svg-coordinates-and-back-again svg coordinate system Why we need ...

  9. 洛谷P1901发射站

    题目 一道单调栈裸题,主要是用单调栈维护单调性,和单调队列都可以在\(O(n)\)的时间内得出单调最大值或最小值,要比堆要快. 这个题可以用h来当做单调栈的使用对象,即用单调栈来维护高度,高度是越在栈 ...

  10. 《挑战30天C++入门极限》C++运算符重载转换运算符

        C++运算符重载转换运算符 为什么需要转换运算符? 大家知道对于内置类型的数据我们可以通过强制转换符的使用来转换数据,例如(int)2.1f;自定义类也是类型,那么自定义类的对象在很多情况下也 ...