JQ文字滚动效果

最新推荐文章于 2023-02-28 17:56:48 发布

叮叮叮会过去的

最新推荐文章于 2023-02-28 17:56:48 发布

阅读量657

点赞数 1

分类专栏： Web 文章标签： jquery 文字滚动

本文链接：https://blog.csdn.net/chending_cd/article/details/100160429

版权

本文介绍了如何利用jQuery创建文字滚动效果，通过核心的scroll.js文件实现动态滚动，结合HTML结构，达到吸引用户注意力的视觉体验。

摘要由CSDN通过智能技术生成

先来一波核心 scroll.js

// JavaScript Document  scroll.js
(function($){
	$.fn.myScroll = function(options){
	//默认配置
	var defaults = {
		speed:40,  //滚动速度,值越大速度越慢
		rowHeight:24 //每行的高度
	};
	
	var opts = $.extend({}, defaults, options),intId = [];
	
	function marquee(obj, step){
	
		obj.find("ul").animate({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		
		this.each(function(i){
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this, sh);
				}
			}, speed);

			_this