>  기사  >  웹 프론트엔드  >  js 또는 css_javascript 기술을 사용하여 스크롤 광고를 구현하기 위한 여러 옵션

js 또는 css_javascript 기술을 사용하여 스크롤 광고를 구현하기 위한 여러 옵션

WBOY
WBOY원래의
2016-05-16 18:35:471237검색

js의 스크롤 이벤트를 트리거할 때 제가 만난 것은 정말 움직임이 없었습니다. 처음에는 FF에서 이렇다고 생각했지만 IE6과 IE7 모두 그런 효과가 있을 것이라고는 예상하지 못했습니다.
그래서 다음과 같은 마법의 코드를 찾았습니다. CSS만 사용하여 스크롤 효과를 구현하는 방법~~
#fixed{position:fixed;}

scrolling < ;/div>

바로 이 속성으로 스크롤이 되는군요. 하지만 아직 끝난 게 아닙니다. Firefox와 IE7만 지원합니다. IE6도 사용할 수 있다고만 말씀드렸지만 IE6을 구현하는 것은 좀 복잡합니다. >코드 복사

코드 복사


코드는 다음과 같습니다.
lastScrollY=0; function heartBeat(){ var diffY if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; 🎜>else if (document.body)
diffY = document.body.scrollTop
else
{}
percent=.1*(diffY-lastScrollY)
if(percent>0; )percent=Math.ceil(퍼센트);
else 퍼센트=Math.floor(퍼센트);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12"). style.top) 퍼센트 "px"
(document.getElementById("lovexin12" ).style.top) 퍼센트 "px";

lastScrollY=lastScrollY 퍼센트
}

window.setInterval("heartBeat()",1);


관심이 있으시면 상단을 하단에 상대적으로 변경할 수 있습니다. 그러면 훨씬 더 좋습니다.
최근 js 라이브러리를 보다가 제가 더 관심을 갖고 있는 jquery가 꽤 괜찮아서~ 이제 jquery를 사용해 스크롤링을 구현하는 코드를 하나 더 올려보겠습니다. 위 코드보다 느낌이 훨씬 좋습니다. . 하지만 꼭 필요하지 않다면 선택일 뿐입니다. 결국 jquery의 코드는 수십 KB입니다.




코드 복사


코드는 다음과 같습니다.
$(document).ready (function( ){ if($.browser.msie && $.browser.version == 6) { FollowDiv.follow(); } }); >FollowDiv = {
follow : function(){
$('#cssrain').css('position','absolute')
$(window).scroll(function(){
var f_top = $(window).scrollTop() $(window).height() - $("#cssrain").height() -parseFloat($("#cssrain").css("borderTopWidth") ) - parsFloat ($("#cssrain").css("borderBottomWidth"))
$('#cssrain').css( 'top' , f_top )
});
}


자, 그 얘기는 그만 합시다! ! 이해가 안 되는 부분이 있으면 물어보시면 토론이 진행됩니다~! 내 QQ 그룹에 오신 것을 환영합니다. 함께 배우고 발전합시다. 그룹 번호: 5678537
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.