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. 【编程思想】【设计模式】【结构模式Structural】门面模式/外观模式Facade

    Python版 https://github.com/faif/python-patterns/blob/master/structural/facade.py #!/usr/bin/env pyth ...

  2. 3.1 go context代码示例

    context.WithCancel返回两个有关联的对象,ctx与cancel,调用cancel发送一个空struct给ctx,ctx一旦接收到该对象后,就终止goroutine的执行;ctx是线程安 ...

  3. 【C/C++】最长不下降子序列/动态规划

    #include <iostream> #include <vector> using namespace std; int main() { //输入 int tmp; ve ...

  4. Redis cluster 集群报错合集

    目录 一.连接集群操作报错(error)MOVED 二.集群关闭后重启报错 三.Redis (error) NOAUTH Authentication required 四.Redis集群使用中突然挂 ...

  5. Mysql解决主从慢同步问题

    目录 一.简介 为何有延迟 二.观察 三.解决办法 参数 多线程 组提交 一.简介 一般主从复制,有三个线程参与,都是单线程:Binlog Dump(主) ----->IO Thread (从) ...

  6. Android App加固原理与技术历程

    App为什么会被破解入侵 随着黑客技术的普及化平民化,App,这个承载我们移动数字工作和生活的重要工具,不仅是黑客眼中的肥肉,也获得更多网友的关注.百度一下"App破解"就有529 ...

  7. SWPUCTF_2019_login(格式字符串偏移bss段）

    题目的例行检查我就不放了,将程序放入ida中 很明显的值放入了bss段的格式字符串,所以我们动态调试一下程序 可以看到ebp这个地方0xffd0dd17-->0xffd0dd38-->0x ...

  8. 资源分配情况（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 资源的分配情况,无非就是未分配.已分配和过度分配三种,这些都可以通过各种视图查看,比如[资源]>[工作组规划器]视图 ...

  9. freeswitch APR-UTIL库消息队列实现

    概述 freeswitch的核心源代码是基于apr库开发的,在不同的系统上有很好的移植性. APR库在之前的文章中已经介绍过了,APR-UTIL库是和APR并列的工具库,它们都是由APACHE开源出来 ...

  10. tomcat下部署两个工程时，只有一个可以访问，另一个出现404错误，该如何解决

    tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...