js-Fokus, Text-Scrolling-Effekt, Code-Sharing_Javascript-Kenntnisse-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:42:39

Original

986 Leute haben es durchsucht

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>

Nach dem Login kopieren

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