@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. HiveQL 查询

    一.select ...... from 语句 1.使用正则表达式来指定列 1)从表stocks中选择symbol列和列名以price作为前缀的列 select symbol,`price.*`  f ...

  2. linux学习6 Linux系统组成及初始

    一.linux发行版回顾 1.版本回顾 2.Linux基础 a.CPU架构 32位CPU: X86 64位CPU:X64因为最早的X64位CPU是amd公司生产的所以也叫 amd64(可以兼容X86) ...

  3. Kubernetes 学习18配置网络插件flannel

    一.概述 1.我们在学习docker时知道docker有四种常用的网络模型 a.bridge:桥接式网络 b.joined:联盟式网络,共享使用另外一个容器的网络名称空间 b.opened:容器直接共 ...

  4. matlab 万能实用的非线性曲线拟合方法

    ——转载网络 在科学计算和工程应用中,经常会遇到需要拟合一系列的离散数据,最近找了很多相关的文章方法,在这里进行总结一下其中最完整.几乎能解决所有离散参数非线性拟合的方法 第一步:得到散点数据 根据你 ...

  5. 深入剖析mmu地址转化

    mmu(内存管理单元),是arm区别于单片机的标志之一,虚拟地址转化分为3种,常见的如下2种. 段式转化如下,由表像中的基地址加偏移地址,(细页转化跟段式转化类似,多了一个2级页表,把虚拟地址0-20 ...

  6. （18）打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. Codeforces 1172F Nauuo and Bug [线段树]

    Codeforces 思路 定义\(f_{l,r}(x)\)表示数\(x\)从\(l\)进去\(r\)出来的时候会变成什么样子.容易发现这个函数是个分段函数,每一段都是斜率为1的一次函数,并且段数就是 ...

  8. CF gym 100962D Deep Purple [后缀树，树链剖分，线段树]

    Codeforces 思路 感觉这个离线的思路好神仙啊qwq 对于每个询问\([l,r]\)其实就是要求\(p_{max}\),使得\(lcs(s[1,p],s[1,r])>p-l\),也就是\ ...

  9. Mac zsh 所有命令失效

    正在配置一些东西,然后zsh的所有命令不能用了. 我艹...... 然后一顿猛查,发现有个命令好使,记录一下 在命令行只想输入下面命令 PATH=/bin:/usr/bin:/usr/local/bi ...

  10. Codeforces 876E National Property ——（2-SAT）

    在这题上不是标准的“a或b”这样的语句,因此需要进行一些转化来进行建边.同时在这题上点数较多,用lrj大白书上的做法会T,因此采用求强连通分量的方法来求解(对一个点,如果其拓扑序大于其为真的那个点,则 ...