suchen

Heim >Web-Frontend >js-Tutorial >Angularjs realisiert den Code für nahtloses Auf- und Abscrollen von Text mit Spezialeffekten

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

高洛峰
高洛峰Original
2016-12-29 10:40:331738Durchsuche

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>

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>

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>

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!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die Lösung für das Problem besteht darin, mit Swiper in AngularJS ein Scroll-Diagramm zu erstellen, das nicht verschoben werden kannNächster Artikel：Die Lösung für das Problem besteht darin, mit Swiper in AngularJS ein Scroll-Diagramm zu erstellen, das nicht verschoben werden kann

In Verbindung stehende Artikel

Mehr sehen