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. 最小化安装centos ubuntu基础命令

    # yum install vim iotop bc gcc gcc-c++ glibc glibc-devel pcre \ pcre-devel openssl openssl-devel zip ...

  2. 注解开发中的@Results注解使用

    package com.hope.dao;import com.hope.domain.User;import com.sun.xml.internal.bind.v2.model.core.ID;i ...

  3. WPF 引用第三方库的控件在设计器加上设计时数据和属性

    本文告诉大家如何在 VisualStudio 2022 的 XAML 设计器中,在设计时给第三方控件加上设计用的属性和数据的方法 此功能要求使用不低于 VisualStudio 2019 的 16.8 ...

  4. [源码解析] PyTorch 分布式(14) --使用 Distributed Autograd 和 Distributed Optimizer

    [源码解析] PyTorch 分布式(14) --使用 Distributed Autograd 和 Distributed Optimizer 目录 [源码解析] PyTorch 分布式(14) - ...

  5. Nginx LOCATOIN块配置

    1 匹配模式优先级 location = /uri =开头表示精确匹配,只有完全匹配上才能生效. location ^~ /uri ^~ 开头对URL路径进行前缀匹配,并且在正则之前.无正则普通匹配( ...

  6. Linux 文件属性及详细操作

    目录 Linux 文件属性 文件属性信息组成 文件属性概念说明 文件软硬链接说明 硬链接 软链接 补充知识 存储数据相关-inode/block inode: block: 读取文件原理图 Linux ...

  7. PMP合同选择

    合同选择

  8. CF656C Without Text 题解

    Content 输入一个字符串 \(s\),遍历每一个字符,如果这个字符是小写字母,那么答案就加上这个字母的字母表序:否则,如果这个字符是小写字母,那么答案就减去这个字母的字母表序.求最后的答案. 字 ...

  9. TensorFlow.NET机器学习入门【2】线性回归

    回归分析用于分析输入变量和输出变量之间的一种关系,其中线性回归是最简单的一种. 设: Y=wX+b,现已知一组X(输入)和Y(输出)的值,要求出w和b的值. 举个例子:快年底了,销售部门要发年终奖了, ...

  10. vue+uniapp实现多任务并发下载文件 ｜ 断点续下, 任务列表, 多任务并发限制

    一.插件简介 zhimi-downloadManager(智密 - 多任务下载管理插件)是一个支持多任务多并发下载,支持多/单任务管理,并且实时反馈任务下载进度的uniapp原生插件.平台支持:And ...