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


Posted in Javascript onSeptember 01, 2019

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

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实现可用滑块滑动的缓动图代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
简单分析js中的this的原理
Aug 31 #Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
You might like
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
php curl发送请求实例方法
2019/08/01 PHP
jQuery使用手册之一
2007/03/24 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
vue登录注册实例详解
2019/09/14 Javascript
python提取内容关键词的方法
2015/03/16 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python开发的HTTP库requests详解
2017/08/29 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
2014迎新年晚会策划方案
2014/02/23 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
民族精神月活动总结
2014/08/28 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
英语读书笔记
2015/07/02 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技