资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

网站前端制作之列表无缝滚动

在门头沟等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站建设 网站设计制作按需网站建设,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,成都外贸网站制作,门头沟网站建设费用合理。

>列表无缝滚动和列表可切换的无缝滚动，如下图:

Css如下所示:

Html如下所示:


Js如下所示:
scrollUpDown($('#donation_list'));
functionscrollUpDown(obj){
var_height=obj.outerHeight();
var_html=obj.find('#donation_listul').html();
obj.find('#donation_listul').html(_html);
functionscroll(){
returnsetInterval(function(){
if(parseFloat(obj.css('margin-top'))>-(_height)){
obj.css({'margin-top':parseFloat(obj.css('margin-top'))-1});
}else{
obj.css({'margin-top':0});
}
},60);
}
var_interval=scroll();
obj.hover(function(){
_interval=clearInterval(_interval);
},function(){
_interval=scroll();
});
}

如果是要能切换的无缝对接，就如下所示：

Css如下所示：

Html如下所示：

Js如下所示：
~(function($,window,document,undefined){
classScroll{
constructor(eles,opts){
this.$eles=eles;
opts=opts||{};
this.defaults={
mode:'CSS',
cssSpeed:5,
jsSpeed:'normal',
};
this.options=$.extend(true,{},this.defaults,opts);
this.options.jsSpeed=this.handleJsSpeed(this.options.jsSpeed);
this.init();
}
init(){
this.handleEve();
}
handleJsSpeed(sp){
switch(sp){
case'slow':
return50;
case'normal':
return30;
case'fast':
return15;
}
}
handleEve(){
const_this=this;
this.$eles.each(function(i,domEle){
_this.cloneNode(domEle);
_this.initValue(domEle);
_this.wrapDiv(domEle);
_this.createKeyframes();
if(_this.options.mode==='CSS'){
_this.moveByCss(domEle);
_this.handleHoverByCss(domEle);
}else{
_this.moveByJs(domEle);
_this.handleHoverByJs(domEle);
}
});
}
cloneNode(ele){
$(ele).children().clone().appendTo($(ele));
}
initValue(ele){
$(ele).css({
margin:0,
padding:0
});
ele.num=0;
consto=$(ele).parents(":hidden").eq($(ele).parents(":hidden").length-1);
o.css({
display:'block'
});
//ele.h=parseInt($(ele).outerHeight(true)/2);
//Topreventthefathersettingdisplay:flex;fromaffectingtheheightofthechildelement
letsum=0;
$(ele).children().each(function(i,item){
sum+=$(item).outerHeight(true);
});
ele.h=parseInt(sum/2);
o.css({
display:'none'
});
}
wrapDiv(ele){
$(ele).wrap($(``));
}
createKeyframes(){
construnkeyframes=`@keyframesIFER_MOVE{
100%{
transform:translateY(-50%);
}
}`;
conststyle=document.createElement('style');
style.type='text/css';
style.innerHTML=runkeyframes;
document.querySelector('head').appendChild(style);
}
moveByCss(ele){
$(ele).css({
animation:`IFER_MOVE${this.options.cssSpeed}slinearinfinite`
});
}
handleHoverByCss(ele){
$(ele).hover(function(){
$(this).css('animation-play-state','paused');
},function(){
$(this).css('animation-play-state','running');
});
}
moveByJs(ele){
clearInterval(ele.timer);
ele.timer=setInterval(()=>{
if(Math.abs(ele.num)===ele.h){
ele.num=0;
}else{
$(ele).css('transform','translateY('+ele.num+'px)');
}
ele.num--;
},this.options.jsSpeed);
}
handleHoverByJs(ele){
const_this=this;
$(ele).hover(function(){
clearInterval(ele.timer);
},function(){
_this.moveByJs(ele);
});
}
}
$.fn.siScroll=function(options){
newScroll(this,options);
};
})(jQuery,window,document);

$('.list-titleli').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').eq($(this).index()).show().siblings('.content').hide();
});

$(".scroll").siScroll();
网站标题：网站前端制作之列表无缝滚动
文章地址：http://cdkjz.cn/article/eigesh.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都宣传海报鸿艺文化传播成都响应式网站建设华川商务成都app软件开发定制网站建设多少钱成都微信开发贵安服务器托管成都手机网站报价南充护栏钻孔机

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图