JS 鼠标放上去滑出内容案例
.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 鼠标放上去滑出内容案例的更多相关文章
- easyui 单元格超出鼠标放上弹出全部
其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标 ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- JS实现 鼠标放上去 图片自动放大的效果
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...
- 点击图片或者鼠标放上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 ...
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- Slideout.js – 触摸滑出式 Web App 导航菜单
Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...
- JQuery 解决 鼠标快速滑过后,会执行多次滑出的问题
如果用slideToggle,鼠标快速滑过后,滑进滑出很多次,要解决这个问题,用stop(false,true) $(".Nav_L").hover(function () { $ ...
- jquery鼠标放上去显示悬浮层即弹出定位的div层
<div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout= ...
- 鼠标放上去图片慢慢变大js 或 变大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- java 面向对象(三十三):泛型二 泛型在集合中的使用
1. 在集合中使用泛型之前的例子 @Test public void test1(){ ArrayList list = new ArrayList(); //需求:存放学生的成绩 list.add( ...
- 使用QtCreator遇到的一些问题
0. 背景 最近在学习QtCreator(版本:4.8.1:编译器:MSVC 2017 64-bit),遇到了一些问题,特记录如下.( 1. 引用库 QtCreator可以直接包含Windows.h, ...
- C语言笔记、文件io的操作
一个自己定义的头文件: 文件名为 xxx.h 内容: #ifndef _MYHEAD_H #define _MYHEAD_H #include<stdio.h>#include< ...
- C++语法小记---开篇
几句闲话 由于C++的语法非常的复杂,但是实际使用的过程中,经常使用的语法也就那么一些,还有比较多的语法很少被使用,时间一长就容易忘记,因此“C++语法小记”主要是将C++中不经常使用和容易忘记的语法 ...
- DP学习记录Ⅰ
DP学习记录Ⅱ 前言 状态定义,转移方程,边界处理,这三部分想好了,就问题不大了.重点在状态定义,转移方程是基于状态定义的,边界处理是方便转移方程的开始的.因此最好先在纸上写出自己状态的意义,越详细越 ...
- idea 导入eclipse play1.2.7项目
1.play eclipsify #myapp 转为eclipse目录结构 2.导入eclipse,一路next. 3.新增个Application -Xms1536m-Xmx2048m-Xdebug ...
- C++与正则表达式入门
什么是正则表达式? 正则表达式是一组由字母和符号组成的特殊文本, 当你想要判断许多字符串是否符合某个特定格式:当你想在一大段文本中查找出所有的日期和时间:当你想要修改大量日志中所有的时间格式,在这些情 ...
- Python编程初学者指南|百度网盘免费下载|Python新手入门资料
Python编程初学者指南|百度网盘免费下载 提取码:9ozx 目录 · · · · · · 第1章 启程:Game Over程序1.1 剖析Game Over程序1.2 Python简介1.2.1 ...
- 下载spring的路径的文章,已经试用没问题
文章:https://blog.csdn.net/ethan__xu/article/details/80273249 spring jar下载路径 http://repo.spring.io/rel ...
- ken桑带你读源码 之scrapy scrapy\extensions
logstats.py 爬虫启动时 打印抓取网页数 item数 memdebug.py 爬虫结束 统计还被引用的内存 也就是说gc 回收不了的内存 memusage.py 监控爬虫 内存占用 ...