滚屏显示内容-创新互联

js

成都创新互联主营拱墅网站建设的网络公司,主营网站建设方案,app软件开发,拱墅h5小程序设计搭建,拱墅网站营销推广欢迎拱墅等地区企业咨询
$div.myScroll({
    speed:60, //数值越大,速度越慢
});

html结构

    
            
  •         
  •         
  •     

scroll.js

// JavaScript Document
(function($){
	$.fn.myScroll = function(options){
	//默认配置
	var defaults = {
		speed:40,  //滚动速度,值越大速度越慢
	};
	
	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")));
				//20是p元素的浮动,s跟总高+浮动进行对比
				if(s >= ($(this).find("li").slice(0, 1).height() + 20)){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		
		this.each(function(i){
			var speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this);
				}
			}, speed);

			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this);
					}
				}, speed);
			});
		
		});

	}

})(jQuery);

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


分享名称:滚屏显示内容-创新互联
标题网址:http://scyanting.com/article/cdodhp.html