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. “==” 和 equals()的区别

    ※ "==" 和 equals()的区别 ※ == :比较. 基本数据类型比较的是值:. 引用类型比较的是地址值. ※ equals(Object o):1)不能比较基本数据类型, ...

  2. eclipse.ini顺序

    -vmargs需放在-Dfile.encoding=UTF-8之前,否则会出现乱码 举例: -startup plugins/org.eclipse.equinox.launcher_1.3.0.v2 ...

  3. 记一次 .NET 某妇产医院 WPF内存溢出分析

    一:背景 1. 讲故事 上个月有位朋友通过博客园的短消息找到我,说他的程序存在内存溢出情况,寻求如何解决. 要解决还得通过 windbg 分析啦. 二:Windbg 分析 1. 为什么会内存溢出 大家 ...

  4. <转>Java NIO API

    Java NIO API详解 NIO API 主要集中在 java.nio 和它的 subpackages 中: java.nio 定义了 Buffer 及其数据类型相关的子类.其中被 java.ni ...

  5. [Java Web 王者归来]读书笔记3

    第四章 JSP JSP基本语法 1 JSP中嵌入Java 代码 <% Java code %> 2 JSP中输出 <%= num %> 3 JSP 中的注释 <%-- - ...

  6. [BUUCTF]PWN——mrctf2020_shellcode

    mrctf2020_shellcode 附件 步骤: 例行检查,64位程序,开启了relro和pie,没有nx,肯定是用shellcode最方便了 本地试运行一下,看看大概的情况 64位ida载入,根 ...

  7. [BUUCTF]PWN——[BJDCTF 2nd]secret

    [BJDCTF 2nd]secret 附件 步骤: 例行检查,64位程序,开启了canary和nx 本地试运行一下,看看程序大概的情况,好像是一个什么游戏 64位ida载入,检索程序里的字符串,发现了 ...

  8. Python旋转魔方阵

    [问题描述]输入一个自然数N(2≤N≤9),要求输出如下的魔方阵,即边长为N*N,元素取值为1至N*N,1在左上角,呈顺时针方向依次放置各元素. N=3时:    1    2    3    8   ...

  9. 40张图+万字，从9个数据类型帮你稳稳的拿捏Redis数据结构

    摘要:本文把Redis新旧版本的数据结构说图解一遍,共有 9 种数据结构:SDS.双向链表.压缩列表.哈希表.跳表.整数集合.quicklist.listpack. 本文分享自华为云社区<为了拿 ...

  10. linux服务器加入AD域（sssd）~ 通过域用户ssh登录加域的linux服务器

    搭建域控:参考 https://www.cnblogs.com/taosiyu/p/12009120.html 域控计算机全名: WIN-3PLKM2PLE6E.zhihu.test.com 域:zh ...