文本域获得焦点时自动变大

乱编乱写 4005 Views 4 Comments

文本域获得焦点时自动变大,当鼠标焦点离开文本域后自动复原大小

demo:


html: 

<textarea class="hackhp" style="height:20px;width:50%;"></textarea>

js: 

jQuery("textarea.hackhp").focus(function() { 
$(this).animate({ height: "100px" }, 300); 
}).blur(function() { 
$(this).animate({ height: "20px" }, 300); 
}); 

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>进度条</title>
<style>
    .progress{
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   height: 20px;
   background: #f5f5f5;
   border-bottom: 1px solid #ddd;
    }
 
    .progress-inner{
   width: 1%;
   background: #d43f3a;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
    }
</style>
</head>
<body ontouchstart="">
 
<div class="progress">
    <div class="progress-inner" id="progress"></div>
</div>
 
<script>
    (function () {
   // 获取进度条 div
   var $progress = document.getElementById('progress');
 
   // 初始进度,1%
   var progress = 1;
 
   // 生成随机数
   var random = function(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min);
   };
 
   // 跑进度
   var onprogress = function () {
  // 随机时间
  var timeout = random(10, 30);
 
  setTimeout(function () {
 // 如果页面加载完毕,则直接进度到 100%
 if(window.loaded){
$progress.style.width = '100%';
return;
 }
 
 // 随机进度
 progress += random(1, 5);
 
 // 随机进度不能超过 98%,以免页面还没加载完毕,进度已经 100% 了
 if(progress > 98){
progress = 98;
 }
 
 $progress.style.width = progress + '%';
 onprogress();
  }, timeout);
   };
 
   // 开始跑进度
   onprogress();
 
   window.onload = function(){
  window.loaded = true;
   };
    })();
</script>
 
<iframe src="http://baidu.com/" frameborder="0"></iframe>
<iframe src="http://163.com/" frameborder="0"></iframe>
<iframe src="http://qq.com/" frameborder="0"></iframe>
 
</body>
</html>

标签: HTML, JS,

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
loading