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. maven常用Java配置

    maven国内镜像 ------------------------------------------------------------------------------------------ ...

  2. Activiti工作流引擎使用详解（一）

    一.IDEA安装activiti插件 在插件库中查找actiBPM,安装该插件,如果找不到该插件,请到插件库中下载该包手动安装,插件地址 http://plugins.jetbrains.com/pl ...

  3. MFC入门示例之树控件(CTreeControl)

    1 //增加按钮 2 void CMFCApplication8Dlg::OnBnClickedButtonAdd() 3 { 4 //树中添加节点 5 CString strText; 6 GetD ...

  4. layout_weight属性分析

    最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...

  5. 联盛德 HLK-W806 (十): 在 CDK IDE开发环境中使用WM-SDK-W806

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

  6. Golang爬虫+正则表达式

    最近学习go,爬取网站数据用到正则表达式,做个总结: Go中正则表达式采用RE2语法(具体是啥咱也不清楚): 字符 . --匹配任意字符 e.g: abc. 结果: abcd,abcx,abc9; [ ...

  7. 直接在filter过滤器代码里加org.apache.struts2.ServletActionContext.getRequest()会出现空指针情况

    直接在filter过滤器代码里加org.apache.struts2.ServletActionContext.getRequest()获得request对象请注意啦,会出现空指针情况 请关注此处:

  8. C++ 11 新特性： auto 和 decltype 区别和联系

    一. auto简介编程时候常常需要把表达式的值付给变量,需要在声明变量的时候清楚的知道变量是什么类型.然而做到这一点并非那么容易(特别是模板中),有时候根本做不到.为了解决这个问题,C++11新标准就 ...

  9. uniapp+nvue实现仿微信/得物相册插件：选择界面 +自定义相册+图片视频过滤

    本篇文章基于uniapp 框架+ nvue,实现了uniapp仿微信/得物相册选择功能实例项目,该插件实例实现了以下功能: 1: 相册过滤 2: 图视频过滤 3: 界面UI定制化 4: 栅格列数定制化 ...

  10. 谷歌浏览器请求返回JSON内容自动格式化

    我们使用谷歌浏览器的扩展插件 下载插件 官方网址:https://github.com/gildas-lormeau/JSONView-for-Chrome 我也上传了 一份:https://yvio ...