Comment agrandir les images Layui

Regardez d'abord les rendus

Première étape :

Code HTML : Créer un curseur

<div id="slideys" class="demo-slider"></div>

Recommandations associées : "Tutoriel du framework Lauii"

Partie 2 : Code JavaScript

var 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 );                 
}              
}          
});    
});

Connectez-vous au réseau d'outils pour procéder à la conversion de la taille de l'image en ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!