suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert Code-Javascript-Fähigkeiten zum Zoomen und Dehnen von Folientextfeldern

JS implementiert Code-Javascript-Fähigkeiten zum Zoomen und Dehnen von Folientextfeldern

WBOY
WBOYOriginal
2016-05-16 15:33:491230Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code zum Implementieren des Zoom- und Streckungseffekts des Folientextfelds. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der hier eingeführte Zoom- und Streckungseffekt für Folientexte wurde von mir geschrieben, als ich nichts zu tun hatte. Es gibt möglicherweise noch viel zu tun in Bezug auf die Kompatibilität mit IE8 Firefox hat unterschiedliche Erweiterungsgeschwindigkeiten. Beeilen Sie sich, ich habe den Grund noch nicht gefunden. Bitte geben Sie einige Ratschläge von JS-Experten.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-slide-txt-dlg-show-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content" content="text/html charset=gb2312">
<title>slide文字框缩放伸展效果</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
.box{width:300px; margin:10px; border:1px solid #ccc; overflow:hidden; position:relative; font-size:12px;}
.oHx{height:30px; background:#eee; line-height:30px; font-size:14px; text-indent:14px; cursor:pointer;}
.fold{position:absolute; top:9px; right:12px;}
.box_content{line-height:18px; overflow:hidden; display:none;}
</style>
<script type="text/javascript">
 function getElementsByClassName(className,id,tag){
    tag = tag || "*";
    if(id){
     var id = typeof id == "string" &#63; $(id) : id;
    }else{
     var id = document.body;
    }
    var els = id.getElementsByTagName(tag),arr = [];
    for(var i=0,n=els.length;i<n;i++){
     for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
      if(k[j]==className){
       arr.push(els[i]);
       break;
      }
     }
    }
    return arr;
   };
   function Slide(slideClass,slideBtn,slideCon,slideSpeed) {
    this.oSlides = getElementsByClassName(slideClass);
    this.oTimer = null;
    this.slideBtn = slideBtn;
    this.slideCon = slideCon;
    this.slideSpeed = slideSpeed;
   }
   Slide.prototype = {
    oTimer:null,
    _init:function (){
     this._slideEvent();
    },
    _slideEvent:function (){
     var This = this;
     for(var i = 0,n=This.oSlides.length;i<n;i++){
      (function(n){
       var oSlide = This.oSlides[n];
       var oSlideBtn = getElementsByClassName(This.slideBtn,oSlide)[0];
       var oSlideCon = getElementsByClassName(This.slideCon,oSlide)[0];
       oSlideBtn.onclick = function (){
        if(oSlideCon.style.display == "block" && This.oTimer == null){
         This._slideClose(oSlideCon);
        }else if(!(oSlideCon.style.display == "block" ) && This.oTimer == null){
         This._slideOpen(oSlideCon);
        }
       }
      })(i)
     }
    },
    _slideOpen:function (slideCon){
     var This = this;
     slideCon.style.display = "block";
     slideCon.style.height = "auto";
     var slideHeight = slideCon.offsetHeight;
     slideCon.style.height = 0 + "px";
     This.oTimer = setInterval(function (){
      if(slideCon.offsetHeight < slideHeight){
       slideCon.style.height = slideCon.offsetHeight + 2 + "px";
      }else{
       clearInterval(This.oTimer);
       This.oTimer = null;
      }
     },This.slideSpeed);
    },
    _slideClose:function (slideCon){
     var This = this;
     This.oTimer = setInterval(function (){
      if(slideCon.offsetHeight <= 0){
       clearInterval(This.oTimer);
       slideCon.style.display = "none";
       This.oTimer = null;
      }else{
       slideCon.style.height =slideCon.offsetHeight - 2 + "px";
      }
     },This.slideSpeed);
    }
   }
  </script>
 </head>
 <body>
  <div class="box"> 
   <div class="oHx slide">收缩2</div> 
   <div class="box_content">
    <ul class="uft" style="padding:10px;"> 
     <li><a href="#" target="_blank">scscms V1.0 阳光企业网站系统</a></li>
  <li><a href="#" target="_blank">24点，VC++游戏源码</a></li>
  <li><a href="#" target="_blank">可记录图像的C#数据库记录单程序</a></li>
  <li><a href="#" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul> 
   </div>
  </div>
  <div class="box"> 
   <div class="oHx slide">收缩3</div> 
   <div class="box_content">
    <ul class="uft"style="padding:10px;"> 
     <li><a href="#" target="_blank">scscms V1.0 阳光企业网站系统</a></li>
  <li><a href="#" target="_blank">24点，VC++游戏源码</a></li>
  <li><a href="#" target="_blank">可记录图像的C#数据库记录单程序</a></li>
  <li><a href="#" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
    </ul> 
   </div>
  </div>
  <script type="text/javascript">
   var mySlide = new Slide("box","slide","box_content",10); 
   mySlide._slideEvent();
  </script>
 </body>
</html>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verschiedene per JavaScript implementierte Drag-and-Drop-Effekte mit der MausNächster Artikel：Verschiedene per JavaScript implementierte Drag-and-Drop-Effekte mit der Maus

In Verbindung stehende Artikel

Mehr sehen