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

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=" ">
<p class="topTit">商品1</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品2</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品3</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品4</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品5</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品6</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品7</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品8</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品9</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品10</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品11</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品12</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品1</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品2</p>
</a></li>
<li><a href=" ">
<p class="topTit">商品3</p>
<img src="" alt="">
</a></li>
<li><a href=" ">
<img src="" alt="">
<p class="botTit">商品4</p>
</a></li>
<li><a href=" ">
<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实现可用滑块滑动的缓动图的更多相关文章

  1. JS实现div的抖动:缓动式抖动

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  2. 《JavaScript 实战》:Tween 算法及缓动效果

    Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...

  3. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  4. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  5. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  6. GSAP JS基础教程--使用缓动函数

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

  7. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  8. tween.js缓动(补间动画)

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  9. JS动画之缓动函数分析及动画库

    上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

随机推荐

  1. centos6安装vim插件youcompleteme问题及解决

    首先clone vim8代码库 git clone https://github.com/vim/vim.git 然后编译 注意下自己的python2.7config在哪儿 ./configure - ...

  2. Oracle 11g 数据库 expdp/impdp 全量导入导出

    从一个用户导出导入到另一个用户 问题 环境:oracle 11g; redhat 6 usera是具有DBA权限,密码为usera 全量导出usera用户下的所有内容,并导入到新建的userb用户 解 ...

  3. useMemo优化React Hooks程序性能(九)

    useMemo主要用来解决使用React hooks产生的无用渲染的性能问题.使用function的形式来声明组件,失去了shouldCompnentUpdate(在组件更新之前)这个生命周期,也就是 ...

  4. R绘制韦恩图 | Venn图

    解决方案有好几种: 网页版,无脑绘图,就是麻烦,没有写代码方便 极简版,gplots::venn 文艺版,venneuler,不好安装rJava,参见Y叔 酷炫版,VennDiagram 特别注意: ...

  5. R scholar和rentrez | NCBI和Google scholar文献数据挖掘

    主要会用到两个R包: rentrez: 'Entrez' in Rscholar: Analyse Citation Data from Google Scholar RISmed 包可以查询 Pub ...

  6. eclipse如何配置tomcat

    依次点击Window->Show View->Other   找到Server,点击OK,看到控制台旁边已有Server了.   点击server下面的链接,依次选择Apache,根据自己 ...

  7. https://docs.huihoo.com/infoq/qconbeijing/2016/day1/工程效率提升专题/2-2-支持百度万人开发的工具装备及百度工程能力建设-夏仲璞.pdf

    https://docs.huihoo.com/infoq/qconbeijing/2016/day1/工程效率提升专题/2-2-支持百度万人开发的工具装备及百度工程能力建设-夏仲璞.pdf http ...

  8. python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图

    python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图 # coding=utf-8 from openpyxl import load_workbook ...

  9. Android平台云端打包证书使用说明

    原贴:https://ask.dcloud.net.cn/article/35985 Android平台云端打包证书使用说明 分类:HBuilderX 证书 Android 签名证书是一个应用的所有者 ...

  10. 转 RAC srvctl 管理命令

    https://czmmiao.iteye.com/blog/1762900 https://blog.csdn.net/weeknd/article/details/72358218 ------- ...