利用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 ...
随机推荐
- maven常用Java配置
maven国内镜像 ------------------------------------------------------------------------------------------ ...
- Redis缓存穿透、缓存击穿以及缓存雪崩
作为一个内存数据库,redis也总是免不了有各种各样的问题,这篇文章主要是针对其中三个问题进行讲解:缓存穿透.缓存击穿和缓存雪崩.并给出一些解决方案.这三个问题是基本问题也是面试常问问题. 这篇文章我 ...
- 【C/C++】编码（腾讯）
假定一种编码的编码范围是a ~ y的25个字母,从1位到4位的编码,如果我们把该编码按字典序排序,形成一个数组如下: a, aa, aaa, aaaa, aaab, aaac, - -, b, ba, ...
- IIS 发布 WebService 连接DB2数据库报错如下图
环境描述: 系统环境: Windows Server 2012 R2 IIS版本:IIS 6.2 C#环境:.NET Framework 4 DB2版本:9.7.500.702 ...
- 利用docker-compose一键部署
利用docker-compose一键部署 目录 利用docker-compose一键部署 前言 快速编写微服务 common-api nacos-server-provider nacos-serve ...
- PDF补丁丁将发布开放源代码的1.0版本
近况 一个月前的今天,母亲永远离开了我. 想起四个月前,我送她了去住院.入院后,做了检查.检查结果没出,我的生日就到了.母亲很关心我的生日.在电话里,她祝我身体健康,又问媳妇有没有给我做生日餐桌的菜肴 ...
- mapbox获取各种经纬度
点击地图即可获取经纬度,也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标,然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单,给地图添加一 ...
- sqlalchemy-orm学生签到 成绩记录查询系统
#!/usr/bin/env python # Author:zhangmingda '''''' from sqlalchemy import create_engine,ForeignKey,DA ...
- Add File as a Link on Visual Studio
https://stackoverflow.com/questions/18963750/add-file-as-a-link-on-visual-studio-debug-vs-publish Ev ...
- 【RTOS】FreeRTOS中的任务堆栈溢出检测机制
目录 前言 任务堆栈 堆栈溢出 任务堆栈溢出检测机制 API 两种堆栈溢出检测方式 堆栈溢出钩子函数 内核何时检测任务堆栈溢出 任务堆栈溢出检测存在的局限性 前言 注意:本笔记发布时可能忘记补充查看d ...