Angularjs réalise un code d'effets spéciaux à défilement transparent de haut en bas-js tutoriel-php.cn

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

高洛峰

Libérer： 2016-12-29 10:40:33

original

1741 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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 !