jQuery像素比计算的输入框特效【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好初始像素内容和新设像素的输入框，代码如下：

<h2>像素比计算</h2>
<div class="container">
  <div class="box">
    <label for="initW">
      <span>初始宽度</span>
      <input type="number" min="1" id="initial-width">
    </label><label for="iniH">
      <span>初始高度</span>
      <input type="number" min="1" id="initial-height">
    </label>
  </div>
  <div class="box">
    <label for="newW">
      <span>新设宽度</span>
      <input type="number" min="1" id="new-width">
    </label><label for="newH">
      <span>新设高度</span>
      <input type="number" min="1" id="new-height">
    </label>
  </div>
</div>

页面的底部，需引入jQuery库和本地的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>