」を使用してスライダーを作成することです。 ||2 番目のステップは、JavaScript コードを使用して画像サイズ変更ツールを作成することです。 ||3 番目のステップは、スライダーをドラッグして、layui 画像サイズを調整することです。"/> 」を使用してスライダーを作成することです。 ||2 番目のステップは、JavaScript コードを使用して画像サイズ変更ツールを作成することです。 ||3 番目のステップは、スライダーをドラッグして、layui 画像サイズを調整することです。">
ホームページ > 記事 > ウェブフロントエンド > レイウイの写真を拡大する方法
#最初にレンダリングを見てください
##ステップ 1: HTMLコード: スライダーの作成<div id="slideys" class="demo-slider"></div>関連する推奨事項: "
layui フレームワーク チュートリアル"
パート 2: 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 ); } } }); });ツール ネットワークにログインして、オンラインで画像サイズを変換します。
以上がレイウイの写真を拡大する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。