左右点击滚动

最新推荐文章于 2021-06-22 18:41:29 发布
最新推荐文章于 2021-06-22 18:41:29 发布
阅读量356 收藏
点赞数
分类专栏： js基本知识 css3 文章标签： js element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwb123456123456/article/details/81054735
版权

index.html

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="./index.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>



</head>

<style lang="less">

</style>



<body>

<div class="rankBox" id="rankBox">

<span id="moveLeft" onclick=handleMove(1)>

<img src="../../img/left.png" alt="" />

</span>

<div class="rank" id="rank">

<div id="ctBox" class="ctBox">

<img src="../../img/5.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/6.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/7.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/8.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/9.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/5.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/6.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/7.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/8.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/9.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/8.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/9.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/5.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/6.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/7.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/8.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/9.jpg" alt="" />

<span>zjl</span>

</div>

<div id="ctBox" class="ctBox">

<img src="../../img/5.jpg" alt="" />

<span>zjl</span>

</div>

</div>

<span id="moveRight" onclick=handleMove(2)>

<img src="../../img/right.png" alt="" />

</span>

</div>

<script src="./index.js"></script>

</body>



</html>

index.css 建议使用less,css主要是外层rankBox固定宽度为1198px,把多出的内容overflow:hidden隐藏,内层盒子rank宽度通过js获取

body{

width:100%;

}

.rankBox{

position: relative;

width:100%;

overflow: hidden;

height:185px;

background:#ffffff;

&:hover>span{

opacity: 1;

}

&>span{

position: absolute;

top:50%;

z-index: 100;

cursor: pointer;

opacity: 0;

transform: translateY(-50%);

-moz-transform: translateY(-50%);

-webkit-transform: translateY(-50%);

-o-transform: translateY(-50%);

transition-duration: 800ms;

-moz-transition-duration: 800ms; /* Firefox 4 */

-webkit-transition-duration: 800ms; /* Safari 和 Chrome */

-o-transition-duration: 800ms; /* Opera */

}

&>span:first-child{

left:0px;

}

&>span:last-child{

right:0px;

}

.rank {

display: flex;

justify-content: space-around;

position: absolute;

left:0px;

margin: 16px 0 0 0;

padding: 20px 0;

background: #ffffff;

vertical-align: middle;

transition-duration: 400ms;

-moz-transition-duration: 400ms; /* Firefox 4 */

-webkit-transition-duration: 400ms; /* Safari 和 Chrome */

-o-transition-duration: 400ms; /* Opera */

&>div {

display: inline-block;

height: 100%;

text-align: center;

width:171px;

height:100%;

cursor: pointer;

img {

height: 98px;

width: 98px;

}

span {

display:block;

padding: 5px 0;

text-align: center;

font-size: 14px;

color: #231815;

}

}

}

}

index.js 主要通过控制left来控制左右移动，通过控制n来确定移动多少

// (function(){

function handleMove(speed) {

let n=1198;

let rankDom = document.getElementById('rank')

let rankStyle = window.getComputedStyle ? window.getComputedStyle(rankDom, "") : rankDom.currentStyle;

let curEleBoxLeft = rankDom.style.left.replace('px', '');

let ctWidth = document.getElementById('ctBox').style.width;

ctWidth = 1198 / 7;

let relth = document.getElementsByClassName('ctBox').length;

rankDom.style.width = relth * ctWidth + 'px';

let currEleWidth = rankDom.style.width.replace('px', '');

let disLeft;

if (speed == 1) {

disLeft = parseFloat(curEleBoxLeft) + n;

if (disLeft >= 1198) {

return false;

}

rankDom.style.left = disLeft + 'px'

};

if (speed == 2) {

disLeft = curEleBoxLeft - n;

if (Math.abs(disLeft) >= currEleWidth) {

return false;

}

rankDom.style.left = disLeft + 'px'

}

if (Math.abs(disLeft) >= (currEleWidth - 1198)) {

setTimeout(function () {

document.getElementById('moveRight').style.cursor = 'not-allowed';

document.getElementById('moveLeft').style.cursor = 'pointer';

}, 400)



}

else if (disLeft >= 0) {

setTimeout(function () {

document.getElementById('moveRight').style.cursor = 'pointer';

document.getElementById('moveLeft').style.cursor = 'not-allowed';

}, 400)

}

}

// }())

备注：后面有查了资料，尽量不要操作DOM，所以通过css3中的属性transform: translateY来控制

想要飞翔的小猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css文字左右滚动的实现（类marquee）
逝水经年的博客
07-21 1766
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma
【原创】实现一个简单的移动端左右滑动翻页+ 点击下标翻页 利用：HTML5+CSS+Js
热门推荐
小狮狮的博客
06-16 1万+
//【如何做一个简单的手机端页面的翻页】//第一步：创建移动端页面内  HTML + CSS  【注】可用弹性布局   但需要注意的是  外层盒子的定位//第二步： 思考问题  要实现怎样的效果？ //1. 手指滑动时触发事件【左右】两个方向   //2.点击footer部分的下标实现切换效果  //3.点击footer部分的下标实现下标颜色变化//第三步；编写JS代码 //添加监听事件 d...
html li元素移动,JQuery 两个ul标签中的li互相移动(动画淡入淡出)
weixin_31599065的博客
06-22 306
两个ul标签中的li互相移动ul{list-style-type:none;float:left;margin-right:30px;background-color:Green;width:100px;height:100px;padding:0px;}li{margin-bottom:5px;background-color:Red;}var myJson = [{ "id": "1", "N...
html li标签拖动,jquery ul li左右拖动
weixin_36081148的博客
06-20 458
最近做影视的时候 遇到一个集数分集显示,类似下面的效果【用的jquery iscroll插件】 在手机端预览的时候可以左右拖动集数 效果如下 html：1-2021-4041-6061-8081-100101-120121-140141-160161-180181-200201-220221-240241-260261-280281-300301-320321-340341-360361-380...
点击滑动(slideToggle)
weixin_44543108的博客
06-18 1328
需要用到的图标 <a href="#" data-toggle="tooltip" data-original-title="条件查询" class="layui-icon layui-icon-search mx-2" style="font-size:20px;" id="Inquire"></a> 样式不被显示，通过js代码来控制显示或隐藏 @* 查询 *@ &lt...
左右点击滚动的jquery相册
01-23
左右点击滚动的jquery相册
鼠标点击左右滚动js代码
01-23
鼠标点击左右滚动js代码
简单实用的图片轮播插件，支持自动滚动，左右点击滚动
03-09
简单实用的图片轮播插件，支持自动滚动，左右点击滚动
点击左右滚动代码
04-03
非常简单的一个点击左右滚动产品 可以帮助新手 不至于去看那些太难懂的
jquery实现图片左右滚动
05-12
jquery实现图片左右连续滚动
图片左右滚动（可自动，有左右按钮）
07-25
图片左右滚动（可自动，有左右按钮）
带左右箭头点击切换的无缝滚动效果
04-13
现在网络上常用的焦点图带箭头点击切换，无缝滚动
jquery实现左右点击滑动
夏呆毛的博客
09-09 3913
jquery实现左右点击滑动 前端养成记：最近做的老项目，涉及到的一个简单的小功能，但是我这样的前端菜鸟还是费了一些功夫的，所以这里记录一下，以免日后忘记。 一、首先看下效果吧 这个是效果图，这个地方只能显示2个产品，然后可以点击左右滑动，来控制渲染。 二、HTML代码 这是一个div容器，代码是放在它里边的。 <div class="border-gb-title" id="tjcp">推荐产品</div> <div class="grey-card ptb4
jquery实现菜单点击左右滑动效果
weixin_40394965的博客
05-14 7489
先看一张效果图 这里点击左右两边的箭头可以实现菜单的左右滑动，滑动到最左边或者最右边会有一个回弹的效果，就是一个无更多内容的效果。下图是点击左侧按钮，菜单向左滑动一个tab的效果 emmm... 话说的差不多了，小二，上代码(有点粗糙) 先是css: * { margin: 0; padding: 0;...
JQ- 文字左右滚动
小白
02-27 4142
代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文字左右滚动&lt;/title&gt; &lt;/head&gt; &lt;style&gt; * {
点击左右横向滚动，很简单的代码哦
acongshijia的专栏
03-08 4184
点击图片横向滚动 * { margin:0; padding:0;} body { font-size:12px;} #scrollable { background-color:#efefef; border:1px solid #ddd; padding:10px 8px; width:523px;
超简单的jquery 左右滚动图片，箭头控制左右滚动
freejs
06-06 2846
超简单的jquery 左右滚动图片，箭头控制左右滚动   演示     XML/HTML Code &lt;div id="slider1"&gt; &lt;a class="buttons prev" href="#"&gt;left&lt;/a&gt;   &lt;div class="viewport"&gt;   &lt;
js点击按钮滚动条左右滚动·
最新发布
07-11
下面是一个示例代码，展示如何通过点击按钮来左右滚动滚动条： ```html <!DOCTYPE html> ()">左滚动 ()">右滚动 ; overflow-x: scroll;"> ;"> 这是一个宽度为800px的内容，可以通过水平滚动条来查看。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值