.sliderbar {
width: 200px;
height: 40px;
position: relative;
margin: 0 auto;
} .sliderbar span {
display: inline-block;
width: 50px;
text-align: center;
line-height: 40px;
background-color: pink;
} .con {
display: inline-block;
position: absolute;
width: 150px;
text-align: center;
line-height: 40px;
background-color: pink;
}
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
var sliderbar = document.querySelector('.sliderbar')
var con = document.querySelector('.con')
sliderbar.addEventListener('mouseenter', function () {
animate(con, -150, function () {
// 当动画执行完毕,就把箭头方向交换
sliderbar.children[0].innerHTML = '→'
})
})
sliderbar.addEventListener('mouseleave', function () {
animate(con, 50, function () {
sliderbar.children[0].innerHTML = '←'
})
})

还需要引入一个文件

function animate(obj, target, callback) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
// 把移动值改为整数避免存在小数
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer)
// 回调函数写在定时器结束后面
// if (callback) {
// callback();
// }
callback && callback();
}
// 把里面的移动值改为慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px'
}, 15)
}

JS 鼠标放上去滑出内容案例的更多相关文章

  1. easyui 单元格超出鼠标放上弹出全部

    其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标 ...

  2. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  3. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  4. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  5. 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  6. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  7. JQuery 解决 鼠标快速滑过后,会执行多次滑出的问题

    如果用slideToggle,鼠标快速滑过后,滑进滑出很多次,要解决这个问题,用stop(false,true) $(".Nav_L").hover(function () { $ ...

  8. jquery鼠标放上去显示悬浮层即弹出定位的div层

    <div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout= ...

  9. 鼠标放上去图片慢慢变大js 或 变大

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java 面向对象(三十三):泛型二 泛型在集合中的使用

    1. 在集合中使用泛型之前的例子 @Test public void test1(){ ArrayList list = new ArrayList(); //需求:存放学生的成绩 list.add( ...

  2. 使用QtCreator遇到的一些问题

    0. 背景 最近在学习QtCreator(版本:4.8.1:编译器:MSVC 2017 64-bit),遇到了一些问题,特记录如下.( 1. 引用库 QtCreator可以直接包含Windows.h, ...

  3. C语言笔记、文件io的操作

    一个自己定义的头文件: 文件名为 xxx.h 内容: #ifndef _MYHEAD_H   #define _MYHEAD_H #include<stdio.h>#include< ...

  4. C++语法小记---开篇

    几句闲话 由于C++的语法非常的复杂,但是实际使用的过程中,经常使用的语法也就那么一些,还有比较多的语法很少被使用,时间一长就容易忘记,因此“C++语法小记”主要是将C++中不经常使用和容易忘记的语法 ...

  5. DP学习记录Ⅰ

    DP学习记录Ⅱ 前言 状态定义,转移方程,边界处理,这三部分想好了,就问题不大了.重点在状态定义,转移方程是基于状态定义的,边界处理是方便转移方程的开始的.因此最好先在纸上写出自己状态的意义,越详细越 ...

  6. idea 导入eclipse play1.2.7项目

    1.play eclipsify #myapp 转为eclipse目录结构 2.导入eclipse,一路next. 3.新增个Application -Xms1536m-Xmx2048m-Xdebug ...

  7. C++与正则表达式入门

    什么是正则表达式? 正则表达式是一组由字母和符号组成的特殊文本, 当你想要判断许多字符串是否符合某个特定格式:当你想在一大段文本中查找出所有的日期和时间:当你想要修改大量日志中所有的时间格式,在这些情 ...

  8. Python编程初学者指南|百度网盘免费下载|Python新手入门资料

    Python编程初学者指南|百度网盘免费下载 提取码:9ozx 目录  · · · · · · 第1章 启程:Game Over程序1.1 剖析Game Over程序1.2 Python简介1.2.1 ...

  9. 下载spring的路径的文章,已经试用没问题

    文章:https://blog.csdn.net/ethan__xu/article/details/80273249 spring jar下载路径 http://repo.spring.io/rel ...

  10. ken桑带你读源码 之scrapy scrapy\extensions

    logstats.py 爬虫启动时 打印抓取网页数   item数 memdebug.py 爬虫结束 统计还被引用的内存 也就是说gc 回收不了的内存   memusage.py 监控爬虫 内存占用  ...