Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술-JS 튜토리얼-php.cn

Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:42:39

원래의

987명이 탐색했습니다.

이 기사의 예에서는 js 포커스 텍스트 스크롤 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
효과 설명:
오늘 추천하는 것은 또 다른 네이티브 js 포커스 이미지 효과입니다
기본적으로 자동 전환되며 수동으로 전환할 수도 있습니다
JavaScript 코드는 JavaScript 프로그래밍의 모듈 모드인 기능적 객체 프로그래밍을 사용합니다
기본 사용법은 매우 간단합니다. 세 가지 주요 기능이 있습니다 :
1. 모듈식이며 재사용 가능
2. 변수와 함수를 캡슐화하고 전역 네임스페이스를 건드리지 않으며 전역 변수를 오염시키지 않습니다
3. 사용 가능한 public 메소드만 노출되고, 다른 private 메소드는 js가 서로 충돌하지 않도록 숨겨집니다
작업 렌더링: ------보기 효과------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
공유해주신 jQuery 드롭다운 미화 검색폼 효과 코드는 다음과 같습니다

<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="Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술" src="images/01.jpg" /></li>
 <li><img alt="Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술" src="images/02.jpg" /></li>
 <li><img alt="Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술" src="images/03.jpg" /></li>
 <li><img alt="Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술" src="images/04.jpg" /></li>
 <li><img alt="Node.js 포커스 텍스트 스크롤 효과 코드 Sharing_javascript 기술" 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>

로그인 후 복사

위는 여러분과 공유한 js(기존 프레임워크에 의존하지 않음) 포커스 텍스트 스크롤 효과 코드입니다.