在網頁設計中,經常會遇到需要滾動顯示內容的需求。如何實現內容的滾動呢?jquery中提供了多種方法實現div內的內容滾動,下面就簡單介紹一下。
首先,我們需要在html文件中聲明jquery庫,只需要在
標簽中添加以下代碼即可:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
其次,我們需要在css文件中給我們要滾動的div添加樣式,如下:
.scrollDiv{ width: 300px; height: 300px; overflow: hidden; }
其中,scrollDiv是我們給要滾動的div定義的class名,width和height是div的寬度和高度,overflow:hidden則是隱藏超出范圍的內容,這樣就只顯示div的一部分了。
接下來,我們需要在jquery代碼中添加滾動代碼,如下:
$(function () { setInterval(function () { $(".scrollDiv").animate({ marginTop: "-=50px" }, 1000, function () { var $this = $(this); if (($this.height() - $this.scrollTop()) == $this.height()) { $this.css({ marginTop: "0px" }); } }); }, 2000); });
代碼中的setInterval是每隔多少時間執行一次的函數,此處設置的是2s。animate是jquery提供的滾動函數,marginTop則是向上滾動的距離,1000是滾動的時間,單位為毫秒。
代碼中還有一段功能用于實現滾動后從底部重新開始滾動,當滾動到底部時,就將margin-top設為0。
至此,我們就可以實現jquery內的div內容滾動了。