.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. python 装饰器(二):装饰器基础(二)变量作用域规则,闭包,nonlocal声明

    变量作用域规则 在示例 7-4 中,我们定义并测试了一个函数,它读取两个变量的值:一个是局部变量 a,是函数的参数:另一个是变量 b,这个函数没有定义它. >>> def f1(a) ...

  2. linux专题(七):账号管理

    http://dwz.date/UDf 简介 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用户的账 ...

  3. Kubernetes部署通用手册 (支持版本1.19,1.18,1.17,1.16)

    Kubernetes平台环境规划 操作环境 rbac 划分(HA高可用双master部署实例) 本文穿插了ha 高可用部署的实例,当前章节设计的是ha部署双master 部署 内网ip 角色 安装软件 ...

  4. PHP 反序列化漏洞入门学习笔记

    参考文章: PHP反序列化漏洞入门 easy_serialize_php wp 实战经验丨PHP反序列化漏洞总结 PHP Session 序列化及反序列化处理器设置使用不当带来的安全隐患 利用 pha ...

  5. 据说比Spring快44倍的web开发框架,不妨试试

    该框架称为:**light-4j **.官方网站简介:A fast, lightweight and more productive microservices framework.很简单,翻译过来就 ...

  6. Makefile中的一个坑

    问题描述:Makefile中,我想将一个变量的后缀全部进行替换,如将所有的.c后缀变成.d后缀 方法:$(CUR_SOURCE: .c = .d ) 说明:查阅相关资料,了解到上述这种语法就可以将所有 ...

  7. C++语法小记---类型转换

    类型转换 C++类型转换主要包含两种: 隐式类型转换 小类型向大类型转换 char -> int short ->int int -> unsigned int int -> ...

  8. 题解 洛谷 P3247 【[HNOI2016]最小公倍数】

    题意可以转化为是否能找一条从\(u\)到\(v\)的路径,经过的边的\(a\)和\(b\)的最大值恰好都是询问所给定的值. 若只有\(a\)的限制,可以将询问离线,对边和询问都从小到大排序,然后双指针 ...

  9. Webpack前世今生

    在正式介绍Webpack之前,先给大家说明一下前端为什么需要模块化 1.为什么需要模块化 1.1JS原始功能 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码 ...

  10. python-元类和使用元类实现简单的ORM

    元类 面向对象中,对象是类的实例,即对象是通过类创建出来的,在python中,一切皆对象,同样,类也是一个对象,叫做类对象,只是这个类对象拥有创建其子对象(实例对象)的能力.既然类是对象,那么类是通过 ...