div自动滑动，鼠标移上停止滑动

这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动.这次我们就做滚动区域是平滑循环滚动效果。下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),<div class=" ban_img"><div class="in_img"><div class="inside inside1"></div><div class="inside inside2"></div><div class="inside inside3"></div><div class="inside inside4"></div><div class="inside inside5"></div><div class="inside inside6"></div><div class="inside inside1"></div><div class="inside inside2"></div><div class="inside inside3"></div><div class="inside inside4"></div></div></div>下边是CSS样式，我加的是背景图，可跟实际情况选择（图片路径根据实际位置修改）.ban_img{height: 400px;.in_img{width: 3000px;background-color: blue;.inside{width: 300px;float: left;height: 400px;background-repeat: no-repeat;background-size: cover;box-sizing: border-box;border: 3px solid #108A77;}.inside1{background-image: url(../img/binzhilang.png);}.inside2{background-image: url(../img/zhihui.png);}.inside3{background-image: url(../img/jredu.png);}.inside4{background-image: url(../img/sanyi.png);}.inside5{background-image: url(../img/cimply.png);}.inside6{background-image: url(../img/xingbake.png);}}
}实现循环滚动的JS很简单，为div（.in_img）加一个定时器就可以了,每10毫秒调整它的marginleft-1px,循环完一遍，计数器num清零var scroll=document.getElementsByClassName("in_img");var num=0;var time=setInterval(function(){num--;scroll[0].style.marginLeft=num+"px";if(num<=-1800){num=0;}
},10);
那么怎么实现标题所述效果呢？这也很简单，为div(.in_img)绑定两个事件来控制定时器就可以了。首先添加鼠标移上去事件，来清除定时器scroll[0].addEventListener("mouseover",function(){clearInterval(time);
});
然后添加鼠标移走事件，再恢复定时器scroll[0].addEventListener("mouseout",function(){time=setInterval(function(){num--;scroll[0].style.marginLeft=num+"px";if(num<=-1800){num=0;}},10);
})

div自动滑动，鼠标移上停止滑动相关推荐

2022-02-16 工作记录--Swiper-实现跑马灯效果：鼠标经过时停止滑动，鼠标离开后继续滑动
Swiper-实现跑马灯效果:鼠标经过时停止滑动,鼠标离开后继续滑动一.效果图二.对应代码 [swiper详情可见swiper官网,下面给出实现跑马灯效果的代码] [注意] 下面CSS和JS代码里 ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
个人练习-jq 鼠标移上移出查看图片（放大）提示
只做了个简单的效果,以后可以加上动画等效果,实际效果如下: html 代码: <div class="wrap"><ul class="img_list ...
用jQuery一句话实现鼠标移上变色
按钮移上变色效果 <style> .round-corner-btn { -moz-border-radius:4px; -webkit-b ...
【Angular】文本溢出鼠标移上去时显示全部的气泡卡片组件
在使用ng-zorro-antd的table时,发现并没有自带element那种单元格文本溢出显示,element的table设置这个show-overflow-tooltip就能轻松使用. 1.新建 ...

div自动滑动，鼠标移上停止滑动

div自动滑动，鼠标移上停止滑动相关推荐

最新文章

热门文章