微客导航 » 文章资讯 » JS实现可用滑块滑动的缓动图代码

JS实现可用滑块滑动的缓动图代码

2023-08-15 12:53:04 488

尝试模仿京东的“发现好货”模块的可用滑块滑动的缓动图

JS代码

function$(id){returndocument.getElementById(id);}
//缓动轮播图
varfhTimer;
varfhNum=0;
varbarNum=0;
fhTimer=setInterval(marquee,20);
functionmarquee(){
fhNum--;
barNum=fhNum;
if(fhNum<-2400){
fhNum=0;
}
$("fhc_ul").style.left=fhNum+"px";
if(fhNum<-2400){
barNum=fhNum+2400;
}
$("fhc_dBar").style.left=-(barNum/2.75)+"px";
}
$("fhcShow").onmouseover=function(){
$("fhc_d_box").style.display="block";
clearInterval(fhTimer);
}
$("fhc_d_box").onmouseover=function(){
$("fhc_d_box").style.display="block";
}
$("fhcShow").onmouseout=function(){
$("fhc_d_box").style.display="none";
fhTimer=setInterval(marquee,20);
}
//鼠标悬浮在标题也在暂停滚动
$("fhTit").onmouseover=function(){
clearInterval(fhTimer);
}
$("fhTit").onmouseout=function(){
fhTimer=setInterval(marquee,20);
}
//滑块
$("fhc_dBar").onmousedown=function(event){
varevent=event||window.event;
varleftValue=event.clientX-this.offsetLeft;
document.onmousemove=function(event){
varevt=event||window.event;
varlocationX=evt.clientX-leftValue;
if(locationX<0){
locationX=0;
}
elseif(locationX>960-99){
locationX=960-99;
}
$("fhc_dBar").style.left=locationX+"px";
fhNum=-locationX*2.75;
//如果选中了，就取消选中，防止出现bug
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
}
document.onmouseup=function(){
document.onmousemove=null;//取消注册的这个事件
}
}

HTML代码





商品1




商品2


商品3




商品4


商品5




商品6


商品7




商品8


商品9




商品10


商品11




商品12


商品1




商品2


商品3




商品4


商品5

CSS代码 .fxhh.fxhh_ctt{ width:990px; background-color:#fff; float:left; } .fxhh.fxhh_ctt.fh_c_show.fh_c_underimg{ width:150px; height:150px; } .fxhh.fxhh_ctt.fh_c_show{ width:990px; height:260px; background-color:#fff; overflow:hidden; position:relative; } .fxhh.fxhh_ctt.fh_c_show.fh_c_under{ width:2000%; position:absolute; } .fxhh.fxhh_ctt.fh_c_show.fh_c_underli{ float:left; text-align:center; width:150px; height:180px; margin-top:40px; margin-right:50px; } .fxhh.fxhh_ctt.fh_c_show.fh_c_underli.topTit{ margin-bottom:10px; } .fxhh.fxhh_ctt.fh_c_show.fh_c_underli.botTit{ margin-top:10px; } .fxhh.fxhh_ctt.fhc_box{ display:none; width:960px; height:4px; background-color:#f3f3f3; margin:0auto; position:absolute; top:250px; left:210px; } .fxhh.fxhh_ctt.fhc_drop{ width:99px; height:9px; border-radius:4px; background-color:#d8d8d8; position:absolute; top:-3px; }

总结

以上所述是小编给大家介绍的JS实现可用滑块滑动的缓动图代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

JS实现可用滑块滑动的缓动图代码

热门推荐

随机推荐