recherche

Maison  >  Article  >  interface Web  >  Angularjs réalise un code d'effets spéciaux à défilement transparent de haut en bas

Angularjs réalise un code d'effets spéciaux à défilement transparent de haut en bas

高洛峰
高洛峰original
2016-12-29 10:40:331736parcourir

Je n'ai aucun projet à faire récemment, j'ai donc acquis quelques connaissances sur Angularjs pendant mon temps libre, puis j'ai écrit un exemple de défilement transparent de texte de haut en bas. Il a principalement écrit une petite instruction.

Code CSS :

Style de contrôle principal

<style type="text/css">
*{margin: 0px;padding: 0px;}
.slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}
.slide li {height: 49px;line-height: 49px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}
.slide li:hover{background: #ccc;}
</style>

Code HTML : 

<body ng-app="tip">
<div ng-controller = "TipController">
<div class="slide">
<ul class="slideUl">
<!-- 指令 -->
<slide-follow id="slide" dataset-data = "datasetData"></slide-follow>
</ul>
</div>
</div>
</body>

Bien sûr, notre code est basé sur le page Le fichier angulaire.js a été introduit et exécuté
slide-follow est l'instruction dont nous avons besoin pour implémenter dataset-data = "datasetData" est le code texte js que nous devons afficher 

<script type="text/javascript">
var app =angular.module("tip",[]);
app.controller("TipController",function($scope){
// 数据可以根据自己使用情况更换
$scope.datasetData = [
{option : "这个是第一条数据"},
{option : "这个是第二条数据"},
{option : "这个是第三条数据"},
{option : "这个是第四条数据"},
{option : "这个是第五条数据"},
{option : "这个是第六条数据"}
]
})
.directive("slideFollow",function($timeout){
return {
restrict : &#39;E&#39;,
replace : true,
scope : {
id : "@",
datasetData : "="
},
template : "<li ng-repeat = &#39;data in datasetData&#39;>{{data.option}}</li>",
link : function(scope,elem,attrs) {
$timeout(function(){
var className = $("." + $(elem).parent()[0].className);
var i = 0,sh;
var liLength = className.children("li").length;
var liHeight = className.children("li").height() + parseInt(className.children("li").css(&#39;border-bottom-width&#39;));
className.html(className.html() + className.html());
// 开启定时器
sh = setInterval(slide,4000);
function slide(){
if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {
i++;
className.animate({
marginTop : -liHeight * i + "px"
},"slow");
} else {
i = 0;
className.css("margin-top","0px");
}
}
// 清除定时器
className.hover(function(){
clearInterval(sh);
},function(){
clearInterval(sh);
sh = setInterval(slide,4000);
})
},0)
}
}
})
</script>

Premier nous le définissons dans le contrôleur. Le texte qui doit être affiché est défini dans , puis nous pouvons commencer à définir la partie instruction.

Rendu en cours d'exécution :

Angularjs réalise un code deffets spéciaux à défilement transparent de haut en bas

Le texte défilera de haut en bas de manière transparente. Lorsque la souris passe sur Oui, la minuterie sera effacée et le message s'affichera. le défilement s’arrêtera.

Ce qui précède est le code angulaire js que l'éditeur vous présente pour obtenir un défilement transparent du texte de haut en bas. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message. et l'éditeur répondra rapidement à tout le monde. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles liés au code d'effets spéciaux d'angularjs pour un défilement transparent du texte de haut en bas, veuillez faire attention au site Web PHP chinois !


Déclaration：
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 précédent：La solution au problème de l'utilisation de Swiper dans AngularJS pour créer une carte de défilement qui ne peut pas glisserArticle suivant：La solution au problème de l'utilisation de Swiper dans AngularJS pour créer une carte de défilement qui ne peut pas glisser

Articles Liés

Voir plus