Home  >  Article  >  Web Front-end  >  Several options for implementing scrolling advertising using js or css_javascript skills

Several options for implementing scrolling advertising using js or css_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:35:471237browse

When triggering the scroll event of js, what I encountered was really motionless. I initially thought it was like this on FF, but I didn't expect that both IE6 and IE7 had such an effect. I had to marvel at the magic.
So I found the following magical code: using only CSS to achieve the scrolling effect~~
#fixed{position:fixed;}

scrolling


That’s it, scrolling is done with just this attribute. I really want to curse. But it’s not over yet. This only supports Firefox and IE7. I just said that IE6 can also be used, but it is a bit complicated to implement IE6.

Copy code The code is as follows:



I don’t really understand what this means. It also seems to be CSS, but it should be considered a script! ? Maybe someone knows and can tell everyone and share it.
Since my title is about N ways to achieve scrolling, there must be more than just these two. It seems that there are other ways to write CSS, so I won’t list them all. I mainly want to tell you about the more commonly used JS implementation methods. My website uses a piece of code, which I also found online, but there is a disadvantage. It is relatively at the top, that is, if your webpage is not high enough, it will not be able to be pulled to the bottom. In fact, this situation will also occur in Baidu messages. I will not go into more details. I will post it for everyone to see:
Copy code The code is as follows:

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(percent);
else percent=Math.floor( percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top) percent "px";
(document.getElementById("lovexin12" ).style.top) percent "px";

lastScrollY=lastScrollY percent;
}

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

If you are interested, you can change the top to be relative to the bottom, which will be much better.
I have been looking at js libraries recently, and jquery, which I am more interested in, is quite good, so~, now I will post another code that uses jquery to implement scrolling. It feels much better than the above one. But it’s just a choice. You can use it if it’s not necessary. After all, the code of jquery is dozens of KB.

Copy code The code is as follows:

$(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")) - parseFloat ($("#cssrain").css("borderBottomWidth"));
$('#cssrain').css( 'top' , f_top );
});
}
}

Okay, let’s stop talking about it! ! If you don’t understand something, you can ask it! Discussion will make progress~! Welcome everyone to join my QQ group, let’s learn and make progress together. Group number: 5678537
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn