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 引用的方式 鼠标经过弹出效果的更多相关文章

  1. js form表单 鼠标移入弹出提示功能

    JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...

  2. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  3. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...

  6. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  7. SVN 安装后右键出现点击鼠标右键弹出错误提示：CrashHandler initialization error

    SVN 安装后右键出现点击鼠标右键弹出错误提示:CrashHandler initialization error 原因是目标文件夹中缺少SendRpt.exe文件 解决方案:找svn是好的的同事将b ...

  8. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  9. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

随机推荐

  1. 联盛德 HLK-W806 (八): 4线SPI驱动SSD1306/SSD1315 128x64 OLED液晶屏

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  2. 访问Github速度很慢以及解决方法(系统通用)

    原因分析1,CDN,Content Distribute Network,可以直译成内容分发网络,CDN解决的是如何将数据快速可靠从源站传递到用户的问题.用户获取数据时,不需要直接从源站获取,通过CD ...

  3. 前端避坑指南丨辛辛苦苦开发的 APP 竟然被判定为简单网页打包？

    传统混合移动App开发模式,通常会使用WebView作为桥接层,但随着iOS和Android应用商店审核政策日趋严格,有时会被错误判定为简单网页打包成App,上架容易遭到拒绝. 既然可能存在风险,那我 ...

  4. 使用plantuml，业务交接就是这么简单

    使用plantuml,业务交接就是这么简单 你好,我是轩脉刃. 最近交接了一个业务,原本还是有挺复杂的业务逻辑的,但发现交接过来的项目大有文章,在项目代码中有一个docs文件夹,里面躺着若干个 pum ...

  5. Mysql一致性效验_pt工具

    目录 一.简介 二.原理介绍 三.选项 四.环境 五.部署 一.简介 pt工具可以随机抽取主从的数据进行对比,用于测试主从数据一致性.也可以对不一致数据进行修复.这个工具在主或者从上安装均可 二.原理 ...

  6. shell脚本 查看cpu的温度

    一.简介 源码地址 日期:2018/8/24 介绍:查看主板上单个多核CPU中温度最高的一个内核 效果图: 二.使用 适用:centos6+ 语言:英文 注意:需要先安装lm_sensors,不支持虚 ...

  7. Java值引用和对象引用区别Demo

    转自:http://blog.csdn.net/gundsoul/article/details/4927404 以前就知道JAVA对象分对象引用和值引用,并且还知道8种基础数据类型,即引用时是值引用 ...

  8. Office365与Office2016差异汇总

    以下很多链接来自原来的博客,如果有哪篇"被色情"的,请留言联系我,谢谢! 2020-8-29更新 通用 图片透明度:http://blog.sina.com.cn/s/blog_5 ...

  9. .NET Core工程应用系列(2) 实现可配置Attribute的Json序列化方案

    背景 在这篇文章中,我们实现了基于自定义Attribute的审计日志数据对象属性过滤,但是在实际项目的应用中遇到了一点麻烦.需要进行审计的对象属性中会包含其他类对象,而我们之前的实现是没办法处理这种类 ...

  10. CF1492A Three swimmers 题解

    Update \(\texttt{2021.3.9}\) 修改了题解中的错别字. \(\texttt{2021.12.16}\) 修改了一个没括回的区间. Content 有 \(3\) 个游泳者,同 ...