JS实现可用滑块滑动的缓动图代码
2019-09-01 08:50
1351 查看
尝试模仿京东的“发现好货”模块的可用滑块滑动的缓动图
JS代码
function $(id) { return document.getElementById(id); }
//缓动轮播图
var fhTimer;
var fhNum = 0;
var barNum = 0;
fhTimer = setInterval(marquee, 20);
function marquee() {
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) {
var event = event || window.event;
var leftValue = event.clientX - this.offsetLeft;
document.onmousemove = function(event) {
var evt = event || window.event;
var locationX = evt.clientX - leftValue;
if(locationX < 0) {
locationX = 0;
}
else if(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代码
<div class="fxhh_ctt">
<div class="fh_c_show" id="fhcShow">
<ul class="fh_c_under" id="fhc_ul">
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品1</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品2</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品3</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品4</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品5</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品6</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品7</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品8</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品9</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品10</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品11</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品12</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品1</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品2</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品3</p>
<img src="" alt="">
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="" alt="">
<p class="botTit">商品4</p>
</a></li>
<li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<p class="topTit">商品5</p>
<img src="" alt="">
</a></li>
</ul>
</div>
<!-- 滑块 -->
<div class="fhc_box" id="fhc_d_box">
<div class="fhc_drop" id="fhc_dBar"></div>
</div>
<!-- 滑块end -->
</div>
CSS代码
.fxhh .fxhh_ctt {
width: 990px;
background-color: #fff;
float: left;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under img {
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_under li {
float: left;
text-align: center;
width: 150px;
height: 180px;
margin-top: 40px;
margin-right: 50px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .topTit {
margin-bottom: 10px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .botTit {
margin-top: 10px;
}
.fxhh .fxhh_ctt .fhc_box {
display: none;
width: 960px;
height: 4px;
background-color: #f3f3f3;
margin: 0 auto;
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实现可用滑块滑动的缓动图代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于JS组件实现拖动滑块验证功能(代码分享)
- JS+CSS实现大气清新的滑动菜单效果代码
- JS原生代码实现轮播图（无左右滑动，底下圆点按钮）
- JS+CSS实现大气清新的滑动菜单效果代码
- 可左右滑动 js 图片产品 展示 代码 验证可用
- 基于Angular.js实现的触摸滑动动画实例代码
- JS实现移动端整屏滑动的实例代码
- JS基于构造函数实现的菜单滑动显隐效果【测试可用】
- js实现鼠标点击左上角滑动菜单效果代码
- JS实现的左侧竖向滑动菜单效果代码
- JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
- js实现的简洁网页滑动tab菜单效果代码
- JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
- JS实现touch 点击滑动轮播实例代码
- js实现鼠标点击左上角滑动菜单效果代码
- JS实现的左侧竖向滑动菜单效果代码
- 原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
- Javascript实现滑块滑动改变值的实现代码
- Angular.js通过自定义指令directive实现滑块滑动效果
- js实现的简洁网页滑动tab菜单效果代码