Html&CSS&Script 롤링되는 공지글 구현할때

페이지 정보

작성자 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,394회 작성일 14-01-15 14:02

본문

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
    
    function rolling(options) {
     var self = this;
     this.object = document.getElementById(options.rollId);
     this.object.onmouseover = function() {
      self.stop();
     }
     ;
     this.object.onmouseout = function() {
      self.play();
     }
     ;
     this.delay = options.delay || 1000;
     this.speed = options.speed || 50;
     this.step = options.step || 1;
     this.mover = options.mover || false;
     this.elChildHeight = options.childHeight;
     this.elHeight = this.object.offsetHeight;
     this.elPosition = 0;
     this.object.appendChild(this.object.cloneNode(true));
     this.control = setTimeout(function() {self.play()}, this.delay);
    }
    rolling.prototype = {
     play:function() {
      var self = this, time;
      this.elPosition = this.elPosition>(this.mover?this.elHeight:0) ? this.elPosition-this.elHeight : this.elPosition+1;
      this.object.style.top = (this.mover ? -this.elPosition : this.elPosition) + "px";
      this.control = setTimeout(function() {self.play()}, this.elPosition%(this.elChildHeight*this.step)==0?this.delay:this.speed);
     }
     ,
     stop:function() {
      clearTimeout(this.control);
     }
    }
    var roll1 = null;
    //var roll2 = null;
    window.onload = function() {
     roll1 =  new rolling({rollId: "rollText1", delay: 5000, speed: 10, step: 1, mover: true, childHeight: 27});
      //roll2 =  new rolling({rollId: "rollText2", delay: 2000, speed: 20, step: 1, mover: false, childHeight: 23});
    }
    </script>
 

    <style type="text/css">
     #rollText1{ position:relative; font-size:13px; list-style:none; margin:0px; padding:0px 0px 0px 0px; }
     #rollText1 li{height:23px; padding:4px 0px 0px 5px;}
    </style>
 </head>
 <body>
  <div style="overflow:hidden; height: 23px; ">
     <ul id="rollText1">
     
      <li><a href="/notice/view.asp?idx=69">홍천강 꽁꽁축제 변동사항 알림</a></li>
      
      <li><a href="/notice/view.asp?idx=68">2014 홍천강꽁꽁축제 알림</a></li>
      
      <li><a href="/notice/view.asp?idx=67">제7회 홍천 단호박 축제</a></li>
      
      <li><a href="/notice/view.asp?idx=66">내면 은행나무숲 개방 알림</a></li>
      
      <li><a href="/notice/view.asp?idx=65">2013 제17회 홍천 찰옥수수 축제...</a></li>
     
     </ul>
    
    </div>
 </body>
</html>

답변목록

등록된 답변이 없습니다.

Total 0건 1 페이지
게시물 검색
번호 제목 글쓴이 조회 날짜
게시물이 없습니다.