Maison interface Web js tutoriel js或css实现滚动广告的几种方案_javascript技巧

js或css实现滚动广告的几种方案_javascript技巧

May 16, 2016 pm 06:35 PM
css js

在触发js的scroll事件啊,可是我遇到的是真正不动的,我开始以为是FF上面才会这样,没想到IE6和IE7都有如此效果,不得不惊叹神奇了。
如是我就找出了如下神奇的代码:仅用CSS实现滚动效果~~
#fixed{position:fixed;}

滚动


完了,就这个属性就搞定滚动了,真想骂人了。不过还没完呢,这个只支持火狐和IE7,我刚才说过IE6也可以的,只是IE6要实现就有点复杂了,

复制代码 代码如下:



这个我也没太看是什么意思。也好像是CSS,不过应该也算有脚本了吧!?也许有人知道可以告诉大家,分享一下。
既然我的标题是实现滚动的N种方法的话,肯定不只是这两种了。好像CSS的还有其他写法,我就不一一列举了,我主要是想告诉大家比较常用的JS实现方式,我的网站有用到一段代码,也是网上找的,不过有个不好的地方就是它是相对顶部的,也就是你的网页高度不够就会出现拉不到底的情况,其实百度留言也会出现这种状况的,我就不多说了,先贴出来大家看看:
复制代码 代码如下:

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);

有兴趣的话大家可以把上面的改成相对于底部,这样会好很多。
最近一直在看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")) - parseFloat($("#cssrain").css("borderBottomWidth"));
$('#cssrain').css( 'top' , f_top );
});
}
}

好了,就说到这吧!!有什么不明白的可以提出来!讨论才会有进步~!欢迎大家加入我的QQ群,大家共同学习进步.群号:5678537
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Dans quelle langue le plug-in du navigateur est-il écrit ? Dans quelle langue le plug-in du navigateur est-il écrit ? May 08, 2024 pm 09:36 PM

Dans quelle langue le plug-in du navigateur est-il écrit ?

See all articles