jQuery評論滾動區是一種常見的網頁交互效果,讓網站的評論區更加動態、流暢,增強用戶的體驗感。下面是一段比較基礎的jQuery代碼實現評論滾動區的效果:
// 定義一個評論滾動區類 function CommentRoller(container) { this.container = $(container); // 容器元素 this.items = this.container.children(); // 子元素列表 this.currentIndex = 0; // 當前顯示的子元素索引 this.animationDuration = 1000; // 動畫持續時間 } // 切換到下一個子元素 CommentRoller.prototype.next = function() { // 計算下一個子元素索引 var nextIndex = this.currentIndex + 1; if (nextIndex >= this.items.length) { nextIndex = 0; } // 滾動切換 this.container.stop().animate({ scrollTop: this.items.eq(nextIndex).position().top }, this.animationDuration); this.currentIndex = nextIndex; }; // 初始化評論滾動區 $(function() { var roller = new CommentRoller('#comment-roller'); setInterval(function() { roller.next(); }, 5000); });
這段代碼定義了一個名為CommentRoller的類,用于管理評論滾動區的顯示。類中包含了當前顯示的子元素索引、動畫持續時間等屬性,以及next方法用于切換到下一個子元素。
在初始化函數中,我們使用jQuery選擇器獲取了評論滾動區的容器元素,創建了一個CommentRoller實例,并設置了一個定時器,每隔5秒調用一次next方法,實現評論滾動的效果。
上一篇jquery試卷實現代碼
下一篇jquery設置省市區