Heim > Artikel > Web-Frontend > js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse

js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:42:39971Durchsuche

Das Beispiel in diesem Artikel beschreibt den Text-Scroll-Effekt von js focus. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Wirkungsbeschreibung:
Der heute empfohlene Effekt ist ein weiterer nativer js-Fokusbildeffekt
Standardmäßig automatische Umschaltung, Sie können auch manuell umschalten
JavaScript-Code verwendet funktionale Objektprogrammierung, den Modulmodus in der JavaScript-Programmierung
Die grundlegende Verwendung ist sehr einfach, es gibt drei Hauptfunktionen :
1. Modular und wiederverwendbar
2. Es kapselt Variablen und Funktionen, berührt den globalen Namespace nicht und verschmutzt keine globalen Variablen
3. Nur die verfügbaren öffentlichen Methoden werden offengelegt und alle anderen privaten Methoden werden ausgeblendet, um sicherzustellen, dass js nicht miteinander in Konflikt geraten
Vorgangsrendering: -------------------Effekt anzeigen---------------------------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte Effektcode für das jQuery-Dropdown-Verschönerungssuchformular lautet wie folgt

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯js(不依赖现有框架)焦点文字滚动效果</title>
<style >
*{margin:0;padding:0; list-style:none;}

#slider{overflow:hidden;width:470px;height:150px;position:relative; margin:100px auto;}
#slider .pics{width:470px;height:150px}
#slider .pics li{height:150px;width:470px;float:left}
#slider #nav {position:absolute;bottom:5px;right:5px;}
#slider #nav li.nav{background:#F47500; color:#fff;}
#slider #nav li{border:1px solid #f47500; color:#d94b01; cursor:pointer;background:#fff;font-size:12px; height:15px;width:15px;float:left;margin-left:4px;display:inline;text-align:center}
</style>
</head>
<body>

<!--代码部分begin-->
<div id="slider">
 <ul class="pics">
 <li><img alt="js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse" src="images/01.jpg" /></li>
 <li><img alt="js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse" src="images/02.jpg" /></li>
 <li><img alt="js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse" src="images/03.jpg" /></li>
 <li><img alt="js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse" src="images/04.jpg" /></li>
 <li><img alt="js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse" src="images/05.jpg" /></li>
 </ul>
 <ul id="nav">
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(0)},300)">1</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(1)},300)">2</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(2)},300)">3</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(3)},300)">4</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(4)},300)">5</li>
 </ul>
</div>
<script>
var lanrenzhijia = {}, H$ = function(id){return document.getElementById(id)}, H$$ = function(c,p){return p.getElementsByTagName(c)}
lanrenzhijia.slider = function(){
 return{
 init:function(id,options){
  var ul = this.u = H$$('ul',H$(id))[0], li = H$$('li',ul); this.l=li.length; this.index = 0;
  if(options.navId&&options.curClass){this.nav = H$$('li',H$(options.navId)), this.c = options.curClass;}
  this.a=options.auto||0; this.v=options.vertical||0;H$(id).style.overflow = 'hidden';H$(id).style.position = 'relative';ul.style.position='absolute';
  if(this.v){ul.style.top=0; this.h=options.height||li[0].offsetHeight; ul.style.height=(this.l*this.h)+'px';}
  else{ul.style.left=0; this.w=options.width||li[0].offsetWidth; ul.style.width=(this.l*this.w)+'px';}
  this.pos(options.index||0,this.a&#63;1:0);
 },
 
 pos:function(pos,a){
  clearInterval(this.u.posAnim); clearInterval(this.u.auto);
  var curPos=this.v&#63;parseInt(this.u.style.top):parseInt(this.u.style.left),
  correctPos=this.v&#63;pos*this.h:pos*this.w, 
  direction = correctPos>Math.abs(curPos)&#63;1:-1;
  correctPos*=-1; 
  this.index = pos;
  if(this.nav){for(var i=0;i<this.l;i++){this.nav[i].className = i==pos&#63;this.c:''}}
  this.u.posAnim = setInterval(function(){lanrenzhijia.slider.anim(correctPos,direction,a)},10);
 },
 
 anim:function(des,dir,a){
  var curPos=this.v&#63;parseInt(this.u.style.top):parseInt(this.u.style.left);
  if(curPos == des){
  clearInterval(this.u.posAnim);
  if(a||this.a){lanrenzhijia.slider.auto()}
  }
  else{
  var v=curPos-Math.ceil(Math.abs(des-curPos)*.07)*dir+'px';
  this.v&#63;this.u.style.top=v:this.u.style.left=v;
  }
 },
 
 auto:function(){
  this.u.auto=setInterval(function(){lanrenzhijia.slider.move(1,1)},this.a*1000)
 },
 
 move:function(n,a){
  var num=this.index+n, i=n==1&#63;num==this.l&#63;0:num:num<0&#63;this.l-1:num; lanrenzhijia.slider.pos(i,a);
 }
 };
}();
</script>
<script>
lanrenzhijia.slider.init('slider',{ 
 auto:3,
 vertical:1,
 navId:'nav',
 curClass:'nav',
 index:0});
</script>
<!--代码部分end-->

</body>
</html>

Das Obige ist der mit Ihnen geteilte js-Code (hängt nicht vom vorhandenen Framework ab). Ich hoffe, er gefällt Ihnen.

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：JS ruft die Parameterwerte in der URL basierend auf dem Schlüsselwert ab und konvertiert die URL-Parameter in JSON-Objekte_Javascript-FähigkeitenNächster Artikel：JS ruft die Parameterwerte in der URL basierend auf dem Schlüsselwert ab und konvertiert die URL-Parameter in JSON-Objekte_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen