
Look at the renderings first


<div id="slideys" class="demo-slider"></div>
layui framework tutorial"
Part 2: javascript codevar ysw = 0; //记录图片原始宽度
var ysh = 0; //记录图片原始高度
layui.use('slider', function(){
var $ = layui.$
,slider = layui.slider;
slider.render({
elem: '#slideys'
,value: 0 //初始值
,theme: '#1E9FFF'
,step: 1 //步长
,min: -10 //最小值
,max: 10 //最大值
,showstep: true //开启间隔点
,change: function(value){
if(ysw ==0 || ysh == 0){
return;
}
var pjw = ysw/20;
var pjh = ysh/20;
var img = $("#dximg"); //图片ID
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 );
}
}
});
});
The above is the detailed content of How to enlarge layui pictures. For more information, please follow other related articles on the PHP Chinese website!
How to modify the text in the picture
What to do if the embedded image is not displayed completely
How to make ppt pictures appear one by one
How to make a round picture in ppt
User Account Control Cancellation Method
How to use union in c language
ICP coin prospect analysis
What is the difference between j2ee and springboot