レイウイの写真を拡大する方法

爱喝马黛茶的安东尼
リリース: 2019-07-17 09:26:53
オリジナル
3170 人が閲覧しました

レイウイの写真を拡大する方法

#最初にレンダリングを見てください

レイウイの写真を拡大する方法

レイウイの写真を拡大する方法

##ステップ 1:

HTMLコード: スライダーの作成

<div id="slideys" class="demo-slider"></div>
ログイン後にコピー

関連する推奨事項: "

layui フレームワーク チュートリアル"

パート 2: JavaScript コード

var ysw = 0;   //记录图片原始宽度
var ysh = 0;   //记录图片原始高度
layui.use(&#39;slider&#39;, function(){     
var $ = layui.$      
,slider = layui.slider;     
slider.render({            
elem: &#39;#slideys&#39;             
,value: 0 //初始值             
,theme: &#39;#1E9FFF&#39;            
,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 );                 
}              
}          
});    
});
ログイン後にコピー

ツール ネットワークにログインして、オンラインで画像サイズを変換します。

レイウイの写真を拡大する方法

以上がレイウイの写真を拡大する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート