私は最近プロジェクトを行っていないので、暇なときにAngularjsの知識を学び、主に小さな指示を書くテキストのシームレスなスクロールの例を書きました。
CSSコード:
メインコントロールスタイル
<style type = "text/css">*{margin:0px; padding:0px;}。スライド{width:200px; height:200px; border:1px solid #dcdcdc; margin:0 auto; margin-top:50px; overflow:hidden;}。 10px; font-size:16px; list-style:none; border-bottom:1px dashed #dcdcdc; cursor:pointer;}。スライドli:hover {background:#ccc;} </style>HTMLコード:
<body ng-app = "tip"> <div ng-controller = "tipcontroller"> <div> <ul> <! - directive-> <slide-follow id = "slide" dataset-data = "datasetdata"> </slide-follow> </ul> </div> </</<
もちろん、私たちのコードは、ページに導入されたAngular.jsファイルに基づいています。
Slide-Followは、DataSet-Data = "DataSetData"を実装するために必要な命令です。
<script type = "text/javascript"> var app = angular.module( "tip"、[]); app.controller( "tipcontroller"、function($ scope){//データは$ scope.datasetdata = [{{{{this option: "opt op option:" "option:" option " data "}、{オプション:"これは4番目のデータ "}、{オプション:"これは5番目のデータ "}、{"これは6番目のデータです "}]}) "<li ng-repeat = 'datasetdata'> {{data.option}} </li>"、link:function(scope、elem、attrs){$ timeout(var class(){var classname = $( "。" + $(elem).parent()[0]; var i = 0; var i = 0、sh; var i = 0、sh; var i = 0 classname.children( "li")。長さ; var liheight = classname.children( "li")。height() + parseint(classname.children( "li")。 setInterval(Slide、4000); function slide(){if(parseint(classname.css( "margin-top"))>(-lilenged * liheight)){i ++; classname.anime({margintop:-liheight * i+"px"}、 "slow"); 0; classname.css( "margin-top"、 "0px");}} // clear timer classname.hover(function(){clearinterval(sh);}、function(){clearinterval(sh); sh = setinterval(slide、4000);})}}、0)}})</scrip>最初に、コントローラーに表示されるテキストを定義し、次に命令セクションの定義を開始できます。
ランニングレンダリング:
テキストはシームレスに上下にスクロールします。マウスが移動すると、タイマーがクリアされ、スクロールが停止します。
上記は、編集者がテキストをシームレスにスクロールするために紹介したAngularJSコードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!