圖片縮放——利用layui的滑塊
阿新 • • 發佈：2019-05-17
data stat hid ans status 效果 pla one blog
@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的滑塊