@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. Oracle中日期作为条件的查询

    1.范围日期的查询: select * from goods where g_time betweento_date('2018/12/26 10:01:59','yyyy-MM-dd hh:mi:s ...

  2. UWB DWM1000 开源项目框架 之 温度采集

    在之前博文开源一套uwb 框架,后面几篇博文会基于这个开源框架进行简单开发. 让uwb使用者更清楚了解基于这个basecode 开发工作. 这里所做内容是,采集dwm1000 温度,并发送到另一个节点 ...

  3. JS各种案例效果

    1.进度条拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. XAMPP环境搭建WordPress，DVWA

    本周学习内容: 1.学习MySQL数据库.Linux.PHP开发: 2.复习等级培训内容: 3.使用xampp环境安装WordPress,学习WordPress数据库表的设计: 4.使用xampp安装 ...

  5. FTP与HTTP上传文件的对比

    许多站点,比如facebook或一些博客等都允许用户上传或下载文件,比如论坛或博客系统的图片. 在这种情况下,通常有两种选择上传文件到服务器,那就是FTP协议和HTTP协议. 以下列出了一些两者的不同 ...

  6. GDB的安装

    1.下载GDB7.10.1安装包 #wget http://ftp.gnu.org/gnu/gdb/gdb-7.10.1.tar.gz或者可以远程看下有哪些版本 http://ftp.gnu.org/ ...

  7. AtCoder Grand Contest 003题解

    传送门 \(A\) 咕咕 const int N=1005; char s[N];int val[N],n; int main(){ scanf("%s",s+1),n=strle ...

  8. SpringMVC将通过ajax发送的 json数据封装成JavaBean

    SpringMVC将通过ajax发送的 json数据封装成JavaBean 通过ajax发送的 json数据封装成JavaBean对发送时有如下要求: 1.发送的数据类型必须时UTF-8 2.发送的必 ...

  9. ubuntu之路——day11.4 定位数据不匹配与人工合成数据

    1.人工检验train和dev/test之间的区别: 比如:汽车语音识别中的噪音.地名难以识别等等 2.使得你的训练集更靠近(相似于)dev/test,收集更多类似于dev的数据: 比如:dev中存在 ...

  10. Unity火爆插件Behavior Designer行为树插件学习

    如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF..ELSE...神器既可以实现, 但是再复杂的一般用经典的状态机来切换状态,但是写起来比较麻烦.相对的,行为树(Behavior T ...