利用js 引用的方式 鼠标经过弹出效果
js引用的是此网站代码：
https://www.cnblogs.com/jq-growup/p/15609469.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>
<style>
.sliderbar {
position: fixed;
right: 0;
bottom: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #fff;
} .con {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: purple;
z-index: -1;
}
</style>
<script src="box_mv.js"></script>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
var span = document.querySelector('span') sliderbar.addEventListener('mouseover',function(){
box_mv(con,-160,function(){
sliderbar.children[0].innerHTML='→';
}); this.addEventListener('mouseout',function(){
box_mv(con,0,function(){
sliderbar.children[0].innerHTML='←';
})
})
})
</script>
</body>
</html>
利用js 引用的方式 鼠标经过弹出效果的更多相关文章
- js form表单 鼠标移入弹出提示功能
JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...
- 如何不使用js实现鼠标hover弹出菜单效果
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
- 两种纯CSS方式实现hover图片pop-out弹出效果
实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...
- SVN 安装后右键出现点击鼠标右键弹出错误提示：CrashHandler initialization error
SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- jquery鼠标经过弹出层写法
jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...
随机推荐
- virtualbox Linux安装增强功能
1.点击<设备>--><安装增强功能> 2.创建安装包挂载目录,并挂载 #创建挂载目录 mkdir /mnt/cdrom #挂载光盘内容 mount -t auto -r ...
- Linux:$?,$n,$#,$0
$? 获取执行上一个指令的返回值(0为成功,非零为失败) $n 获取当前执行的shell脚本的第n个参数值,n=1...9,当n=0的时表示脚本的文件名,如果n大于9,大括号括起来${10} $# 获 ...
- 【面试】【Linux】【Web】基础概念
1. HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol 2. TCP handshake https://en.wikipe ...
- 通过 Ajax 发送 PUT、DELETE 请求的两种实现方式
一.普通请求方法发送 PUT 请求 1. 如果不用 ajax 发送 PUT,我们可以通过设置一个隐藏域设置 _method 的值,如下: <form action="/emps&quo ...
- 使用$.post方式来实现页面的局部刷新功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 通过静态分析和持续集成 保证代码的质量 （Helix QAC）2
续上.... 第二章 部署示例:Jenkins and Helix QAC工具 第一节 Jenkins 作为持续集成系统 现在有很多持续集成工具,既有免费的,也有商业的.最近的研究显示,Jenkins ...
- 记一次单机Nginx调优，效果立竿见影
一.物理环境 1.系统是Centos 8,系统配置 2核4G,8M带宽,一台很轻的应用服务器. 2.站点部署情况.但站点部署两个实例,占用两个端口,使用nginx 负载转发到这两个web站点. 二. ...
- ios获取文件MD5值
一般我们在使用http或者socket上传或者下载文件的时候,经常会在完成之后经行一次MD5值得校验(尤其是在断点续传的时候用的更 多),校验MD5值是为了防止在传输的过程当中丢包或者数据包被篡改,在 ...
- JUC之Lock接口以及Synchronized回顾
Lock接口 Synchronized关键字回顾: 多线程编程步骤(上): 创建资源类,在资源类创建属性和操作方法 创建多个线程,调用资源类的操作方法 创建线程的四种方式: 继承Thread 实现Ru ...
- Table.Sort排序…Sort（Power Query 之 M 语言）
数据源: 任意查询表 目标: 对其中一列数据进行排序 操作过程: 选取对象>[主页]>[排序]>[升序排序] 选取对象>[主页]>[排序]>[降序排序] M公式: ...