@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. c++ templat乱测

    该上机实验环境 linux mint  IDE:qt5.11   代码复制到windows下vs2017报错,提示char* 类型不能直接赋值字符串 在linux mint下可以运行,测试目的:检验复 ...

  2. 用jquery快速解决IE输入框不能输入的问题_jquery

    代码如下: 在IE10以上版本,微软为了提高IE输入框的便利性,增加了文本内容全部删除和密码眼睛功能,但是有些时候打开新的页面里,输入框却被锁定无法编辑,需要刷新一下页面,或者如果输入框有内容需要点击 ...

  3. xml---基础了解

    XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. 什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language). XML 是一种很像HTML的标 ...

  4. Hive-2.3.6 安装

    本安装依赖Haddop2.8安装 https://www.cnblogs.com/xibuhaohao/p/11772031.html 一.下载Hive与MySQL jdbc 连接驱动 apache- ...

  5. PDB符号文件

    一.什么是PDB文件 PDB(Program DataBase),全称为“程序数据库”文件.存储程序的所有调试信息数据.在编译连接时,如果选择了/debug选项或/debug:full选项,则最新的M ...

  6. editplus 支持lua语言语法高亮显示

    找到自己的安装目录 建一个这个名字的文件 里面写上 #TITLE=LUA ; LUA syntax file written by ES-Computing. ; This file is requi ...

  7. 怎么通过django模板输出双花括号{{}}

    https://segmentfault.com/q/1010000000685399

  8. 洛谷 P5461 赦免战俘 题解

    P5461 赦免战俘 题目背景 借助反作弊系统,一些在月赛有抄袭作弊行为的选手被抓出来了! 题目描述 现有 \(2^n\times 2^n (n\le10)\) 名作弊者站成一个正方形方阵等候 kkk ...

  9. 深入基础(二)练习题,REPL交互解析器

    NPM     关于npm命令其实不算很多很多,起码比dos命令少不少呢废话少说npm命令大全and各个命令用处持续更新中..来自园子内另外一位大神~:http://www.cnblogs.com/P ...

  10. 贪心算法训练(四)——(HDU1050)Moving Tables

    题目描述 在一个狭窄的走廊里将桌子从一个房间移动到另一个房间,走廊的宽度只能允许一个桌子通过.给出 t,表示有 t 组测试数据,再给出 n,表示要移动 n 个桌子.n 下面有 n 行,每行两个数字,表 ...