Home > Article > Web Front-end > How to use javascript to achieve focus text scrolling effect

How to use javascript to achieve focus text scrolling effect

巴扎黑Original: 2017-08-17 14:25:121553browse

The example in this article describes the js focus text scrolling effect. Share it with everyone for your reference. The details are as follows: Effect description:The one recommended today is another native js focus map effect that automatically switches by default. You can also manually switch the javascript code using functional object programming, which is the basic Module mode in javascript programming. Usage is very simple. The main features are three: 1. Modular and reusable 2. Encapsulates variables and functions, does not touch the global namespace, and does not pollute global variables 3. Only exposes available public methods, others All private methods are hidden to ensure that js will not conflict with each other. Running rendering:

Tips: If the browser cannot run normally, you can try to switch the browsing mode. The jQuery drop-down beautification search form effect code shared with you is as follows

<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焦点图效果" src="images/01.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/02.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/03.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/04.jpg" /></li>
 <li><img alt="js焦点图效果" 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?1:0);
 },
 
 pos:function(pos,a){
  clearInterval(this.u.posAnim); clearInterval(this.u.auto);
  var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
  correctPos=this.v?pos*this.h:pos*this.w, 
  direction = correctPos>Math.abs(curPos)?1:-1;
  correctPos*=-1; 
  this.index = pos;
  if(this.nav){for(var i=0;i<this.l;i++){this.nav[i].className = i==pos?this.c:""}}
  this.u.posAnim = setInterval(function(){lanrenzhijia.slider.anim(correctPos,direction,a)},10);
 },
 
 anim:function(des,dir,a){
  var curPos=this.v?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?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?num==this.l?0:num:num<0?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>

The above is the detailed content of How to use javascript to achieve focus text scrolling effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Explanation of tab label switching effect using JavaScriptNext article：Explanation of tab label switching effect using JavaScript

See more

How to use javascript to achieve focus text scrolling effect

Related articles