How to use javascript to achieve focus text scrolling effect
This article example tells js focus text scrolling effect. Shared for your reference. Specific as follows: effect description: today recommended this is another native js focus map effect default automatic switching, can also be manually switched javascript code using functional object programming, that is, javascript programming in the Mole mode of basic usage is very simple, the main characteristics of three: 1, modularization, reusable 2, encapsulated variables and function and the global namespace does not touch, do not pollute the global variables 3, only exposed available public methods, other private methods are hidden, to ensure that the js will not conflict with each other to run the effect:
Tips: If you can not run normally in the browser, you can try to switch the browsing mode. For you to share the jQuery drop-down Americanization search form effect code is as follows
<head>
<metahttp-equiv=”Content-Type “content=”text/html;charset=utf-8″/>
<title>Pure js (no dependency on existing frameworks) focus text scrolling effect</title>
<style>
*{margin:0;padding:0;list-style:none;}
#slider{ overflow:hidden;width:470px;height:150px;position:relative;margin:100pxauto;}
#slider.pics{width:470px;height:150px}
# slider.picsli{height:150px;width:470px;float:left}
#slider#nav{position:absolute;bottom:5px;right:5px;}
#slider#navli. nav{background:#F47500;color:#fff;}
#slider#navli{border:1pxsolid#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>
<! –code section begin–>
<div=”slider”>
<ulclass=”pics”>
<li><imgalt=”js focus image effect” src=”images/01.jpg “/>&</li>
<li><imgalt=”js focus image effect” src=”images/02.jpg”/>&</li>
<li><imgalt=”js focus image effect” src= “images/03.jpg”/></li>
<li><imgalt=”js focus image effect” src=”images/04.jpg”/></li>
<li><imgalt =”js focus image effect” src=”images/05.jpg”/></li>
</ul>
<ulid=”nav”>
<lionmouseover=”setTimeout( function(){lanrenjia.slider.pos(0)}, 300)”>1</li>
<lionmouseover=”setTimeout(function(){lanrenjia.slider.pos(1)}, 300)”>2</li>
<lionmouseover=”setTimeout(function(){lanrenjia.slider.pos(2)},300)”>3</li>
< lionmouseover=”setTimeout(function(){lanrenjia.slider.pos(3)},300)”>4</li>
< lionmouseover=”setTimeout(function() {lanrenjia.slider.pos(4)},300)”>5</li>
</ul>
</div>
<script>
varlanrenjia={},H$ =function(id){returndocument.getElementById(id)},H$$=function(c,p){returnp.getElementsByTagName(c)}
lanrenjia.slider= function(){
return{
init:function(id,options){
varul=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);
varcurPos=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(vari=0. i<this.l;i++){this.nav[i].className=i==pos?this.c:””}}
this.u.posAnim=setInterval(function(){lanrenjia.slider.anim( correctPos,direction,a)},10);
},
anim:function(des,dir,a){
varcurPos=this.v?parseInt(this.u.style.top): parseInt(this.u.style.left);
if(curPos==des){
clearInterval(this.u.posAnim);
if(a||this.a){lanrenjia.slider.auto ()}
}
else{
varv=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(){lanrenjia.slider.move(1,1)}, this.a*1000)
},
move:function(n,a){
varnum=this.index+n,i=n==1?num==this.l?0:num:num<0?this.l-1:num; lanrenjia.slider.pos(i,a);
}
};
}();
</script>
<script>
lanrenjia.slider.init(” slider”,{
auto:3,
vertical:1,
navId: “nav”,
curClass: “nav”,
index:0});
</script>
&! lt;! –code section end–>
</body>
</html>
js image mouseover appear text effect html seek advice
If it is a solid color of the square, you can directly use css to achieve, if not, use js it. css words, you first set the font color and the square background of the same, and then write a: hover attribute, that is, when the mouse passes through the attribute, at this time, you darken the background, and then text color js, write a mouseover event, first let the text in the display: none; state, when passed, become display: block; so.