Angularjs realisiert den Code für nahtloses Auf- und Abscrollen von Text mit Spezialeffekten-js-Tutorial-php.cn

Angularjs realisiert den Code für nahtloses Auf- und Abscrollen von Text mit Spezialeffekten

高洛峰

Freigeben： 2016-12-29 10:40:33

Original

1736 Leute haben es durchsucht

Ich habe in letzter Zeit keine Projekte zu erledigen, deshalb habe ich in meiner Freizeit etwas AngularJS-Wissen erlernt und dann ein Beispiel für das nahtlose Auf- und Abscrollen von Text geschrieben. Dabei handelte es sich hauptsächlich um eine kleine Anleitung.

CSS-Code:

Hauptsteuerelementstil

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

Nach dem Login kopieren

HTML-Code:

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

Nach dem Login kopieren

Natürlich basiert unser Code auf dem Seite Die Datei „angular.js“ wurde eingeführt und ausgeführt
slide-follow ist die Anweisung, die wir zum Implementieren benötigen dataset-data = „datasetData“ ist der Text-JS-Code, den wir anzeigen müssen

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

Nach dem Login kopieren

Zuerst Wir legen es im Controller fest. Der anzuzeigende Text wird in definiert, und dann können wir mit der Definition des Anweisungsteils beginnen.

Rendering ausführen:

Angularjs realisiert den Code für nahtloses Auf- und Abscrollen von Text mit Spezialeffekten

Der Text scrollt nahtlos nach oben und unten, wenn die Maus auf „Ja“ bewegt wird Das Scrollen wird gestoppt.

Das Obige ist der AngularJS-Code, den Ihnen der Editor vorstellt, um ein nahtloses Scrollen des Textes nach oben und unten zu ermöglichen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird allen umgehend antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zum Spezialeffektcode von AngularJS zum nahtlosen Scrollen von Text nach oben und unten finden Sie auf der chinesischen PHP-Website!