jQuery 매개 변수 사용자 정의 문자 주마등 효과 구현

본 고 는 jQuery 가 문자 주마등 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.명확 한 수요
기본 수요:최근 작업 중 에 새로운 수 요 를 받 았 습 니 다.쉽게 말 하면 한 줄 의 문자 가 오른쪽 에서 왼쪽 주마등 까지 의 효 과 를 실현 하고 고정된 시간 간격 으로 순환 하 는 것 입 니 다.
원래 이것 은 실현 하기 쉬 운 수요 이지 만 어 려 운 점 은 사용자 가 스스로 설정 할 수 있 는 많은 매개 변 수 를 요구 하 는 것 이다.이 는 문자 주마등 의 속도 와 다음 에 나타 날 간격 을 포함한다.구체 적 인 수 요 는 다음 그림 을 보십시오.

이렇게 되면 이 기능 을 실현 하 는 것 은 좀 번 거 로 울 것 이 니 뇌 세 포 를 태 워 야 한다.
2.구체 적 인 실현 과정
HTML 에는 다음 과 같은 몇 줄 의 코드 만 필요 합 니 다.

<div id="swiper">
 <div class="swiper_div">
  <span class="swiper_span custom_span"></span>
  <span class="swiper_span id_span">   UID</span>
 </div>
</div>

css 스타일 은 다음 과 같 습 니 다(less 문법 을 사용 하 는 것 을 주의 하 십시오)

#swiper{
 position: absolute;
 width: 100%;
 background-color: red;
 z-index: 10000;
 top:0px;
 .swiper_div{
  color: black;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  transition-property: left;
  transition-timing-function: linear;
  .swiper_span{
  font-size: 16px;
  color: black;
  opacity: 1; //     ，   0-1
  }
 }
}

다음은 관련 js 코드 입 니 다.
우선 기본 값 을 정의 합 니 다.사용자 가 설정 하지 않 으 면 기본 값 을 사용 합 니 다.그렇지 않 으 면 사용자 가 설정 한 값 을 사용 합 니 다.

const WATER_MARK = {
 VERTICAL_AXIS: 200, //     ，  px
 FONT_SIZE: 16, //       ，  px
 FONT_COLOR: '#ffffff', //     
 FONT_OPACITY: 1, //       ，    0-1，1      
 FONT_BACKGROUND: '', //     
 SPEED: 200, //      ，  px/s
 TIME_STAMP: 6, //         ，  s
 TEXT_CONTENT: '', //        
 };

다음은 핵심 코드 입 니 다.

//               
 let $swiper = $('#swiper');
 let $swiperDiv = $(".swiper_div");
 let $swiperSpan = $(".swiper_span");
 let $customSpan = $(".custom_span");
 let $idSpan = $(".id_span");

function waterMark() {
 //          id swiper div   ，        ，         。
 // let swiperWidth = $swiper[0].offsetWidth;
 let swiperDivWidth = $swiperDiv[0].offsetWidth;

 let verticalAxis = WATER_MARK.VERTICAL_AXIS;
 let fontSize = WATER_MARK.FONT_SIZE;
 let fontColor = WATER_MARK.FONT_COLOR;
 let fontOpacity = WATER_MARK.FONT_OPACITY;
 let fontBackground = WATER_MARK.FONT_BACKGROUND;
 let speed = WATER_MARK.SPEED;
 let timeStamp = WATER_MARK.TIME_STAMP;
 let textContent = WATER_MARK.TEXT_CONTENT;

 $swiper.css('top',verticalAxis+'px');
 $swiperSpan.css('font-size',fontSize+'px');
 $swiperSpan.css('color',fontColor);
 $swiperSpan.css('opacity',fontOpacity);
 $swiperDiv.css('background-color',fontBackground);
 $customSpan.text(textContent);

 setTimeout(function () {
  let totalScrollWidth = swiperDivWidth+$swiper[0].offsetWidth;
  let durationTime = totalScrollWidth/speed; // 3.135s
  $swiperDiv.css("transition-duration",durationTime+"s");
  $swiperDiv.css("left","-"+swiperDivWidth+"px");
  setInterval(function () {
  if($swiperDiv.css('left') === '-'+swiperDivWidth+'px'){
   $swiperDiv.css("left","100%");
   $swiperDiv.css("transition-property",'null');
  }else{
   $swiperDiv.css("transition-property",'left');
   $swiperDiv.css("left","-"+swiperDivWidth+"px");
   $swiperDiv.css("transition-delay",timeStamp+'s');
  }
  },1000);
 },1000);
 }
 waterMark();

그 당시 에 이 간격 을 어떻게 통제 할 것 인 가 를 생각 할 때 다른 방법 도 생각 했 습 니 다.시간 을 비교 기준 으로 다음 과 같 습 니 다.

let sumeTime=0; //        
 let durationTime = 5000 ; //     ，   ，           
 let jiange = 6000 ; //        
 let jisuan = 1000; //         
 setTimeout(function () {
 //      
 $swiperDiv.css("left","-"+swiperDivWidth+"px");
 setInterval(function () {
 sumeTime = sumeTime + jisuan; //     setInterval       
 if((sumeTime >= durationTime) && (sumeTime < (jiange + durationTime))){ 
 //         
 $swiperDiv.css("left","100%");
 $swiperDiv.css("transition-property",'null');
 }else if(sumeTime >=(jiange + durationTime)){
 // console.log("              ******");
 $swiperDiv.css("transition-property",'left');
 $swiperDiv.css("left","-"+swiperDivWidth+"px");
 sumeTime = 0;
 }
 },jisuan);
 },1000); 

 두 가지 방식 은 어떤 것 이 좋 고 어떤 것 이 나 쁜 지 는 말 할 수 없 지만,첫 번 째 방식 은 더욱 명확 해 보일 뿐이다.한 마디 로 하면 상기 코드 는 이 수 요 를 실현 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.