利用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 ...
随机推荐
- SpringBoot(4):整合Mybatis
1. 导入mybatis所需要的依赖 1 <!-- 引入 myBatis,这是 MyBatis官方提供的适配 Spring Boot的--> 2 <dependency> 3 ...
- python3约瑟夫环问题
问题描述:n个人围成一个圈,从第一个人开始数1,数到第k个出局,然后下一个人继续从1数,求出局人编号 思路:将所有人编号放到数组里,一个人出局后,下一个人加上k对数组长度求余,得出下一个要删除的编号. ...
- JavaOOP对象和封装
对象: 前言: 在程序员眼中,世界万物皆为对象.世界上有两种人,一种是懂二进制的人,一种就是不懂二进制的人. 面向对象设计的过程就是抽象的过程. 步骤: 第一步:发现类 第二步:发现类的属性 第三步: ...
- 严重危害警告!Log4j 执行漏洞被公开!
12 月 10 日凌晨,Apache 开源项目 Log4j2 的远程代码执行漏洞细节被公开,漏洞威胁等级为:严重. Log4j2 是一个基于 Java 的日志记录工具.它重写了 Log4j 框架,引入 ...
- C# 使用TimeSpan秒数转化为时分秒的写法
1.TimeSpan的生成方法 // 参数: // ticks: // A time period expressed in 100-nanosecond units. public TimeSpan ...
- canvas 实现渐变色填充的三角形
实现效果 效果一: 效果二: 实现思路 canvas实现 1. 绘制三角形 // html <canvas id="triangle" width="30" ...
- PowerShell配置文件后门
PowerShell 配置文件是在 PowerShell 启动时运行的脚本. 在某些情况下,攻击者可以通过滥用PowerShell配置文件来获得持久性和提升特权.修改这些配置文件,以包括任意命 ...
- Linux使用docker安装MinIO
官方地址:http://docs.minio.org.cn/docs/master/minio-docker-quickstart-guide 拉取镜像 docker pull minio/minio ...
- c++内存分布之纯虚函数
关于 本文演示环境:VS2017+32位程序. 纯虚函数是一种特殊的虚函数.可以预测到:虚函数的结论同样适用纯虚函数,但是纯虚函数是一种特殊的存在,还是看看实际结果. 代码写的不够规范: 因为任何带虚 ...
- 【剑指Offer】合并两个排序的链表 解题报告(Python)
[剑指Offer]合并两个排序的链表 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interview ...