js 实例1 实现购物车鼠标移动显示功能框；

实现效果如下；

思路：个人思路是两个小盒子（box1，box2）放在一个大盒子内。

　　重点是如何实现两个盒子的区分，在鼠标上移到box1的时候，box1下边框能够隐藏。　　

　　通过实现z-index的大小，来决定box1有一部分是遮盖box2的,这样通过js鼠标移动事件来将box1的border-bottom=0；

具体实现过程：

这种做法是实现box2 不和box1属于一个父盒子，和box1父盒子属于同一父盒子，通过绝对定位来实现。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .w{
            width: 990px;
            height:200px;
            margin:0 auto;
            background-color:rgb(240,243,239);
            overflow: hidden;
        }
        .inp{
            float: left;
            font-size: 0;
        }
        .inp1{
            float: left;
            width: 200px;
            height: 40px;
        }
        .inp2{

            width: 60px;
            height: 45px;
            border: 0;
            background: red url("images/search.png")  no-repeat center;
            cursor: pointer;
        }
        .shopcar{
            float: left;
            margin-left: 30px;
            overflow: hidden;
        }
        .block1{
            width: 190px;
            height:50px;
            line-height: 50px;
            background: white url("images/gwc1.png") no-repeat  20px;
            background-size: 16px 16px;
            text-align: center;
            cursor: pointer;
            border: 1px solid red;
            position: absolute;
            z-index: 999999;
        }
        .block1 a{
           text-decoration: none;
            color: red;
        }
        .block1 span{
            font-size: 5px;
            color: red;
        }
        .none1{
            display: none;
            width: 300px;
            height: 100px;
            background-color:white;
            position: relative;
            border: 1px solid red;
            left:184px;
            top:50px;
        }
        div.c{
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="inp" id="inp">
            <from >
                <input type="text" class="inp1">
                <input type="submit" class="inp2" value="">
            </from>

        </div>
        <div class="shopcar">
            <div class="block1" id="block1">
                <a href="">我的购物车</a>
                <span>(0)</span>
            </div>
        </div>
        <div class="none1" id="none1">
        </div>
    </div>
    <script type="text/javascript">
        window.onload=function () {
            function $(id) {
                return document.getElementById(id)
            }
            $('block1').onmousemove=function () {
                $('none1').style.display='block';
                // $('block1').style.borderBottomWidth = '0'
                $('block1').className +=' c';
            }
            $('block1').onmouseout=function () {
                $('none1').style.display='none'
                $('block1').removeAttribute('class');
                $('block1').className = 'block1';
            }
        }

    </script>
</body>
</html>

View Code

其他方法。

　　box1，box2属于同一个父盒子，父相子绝。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 90px;
            margin: 100px auto;
            background-color: rgba(0,0,0,0.2);
            position: relative;
            
        }
        .car{
            width: 150px;
            height: 30px;
            background-color: #fff;
            position: absolute;
            left: 200px;
            top: 3px;
            z-index: 9;
            border: 1px solid green;
        }
        .shop{
            width: 310px;
            height: 70px;
            background-color: #fff;
            position: absolute;
            top:33px;
            left: 40px;
            border: 1px solid green;
            display: none;

        }
        div.c{
            border-bottom-width: 0;
        }
        div.t{
            border:  1px solid green;
        }
       
    </style>
</head>
<body>
    <div class="box">
        <div class="car" id="myCar">我的购物车</div>
        <div class="shop t" id="shop"></div>
    </div>

    <script type="text/javascript">
        
        var myCar = document.getElementById('myCar');
        var shop = document.getElementById('shop');


        // 事件 event  冒泡 捕获

        // onchange   oninput事件 检测输入框用户输入 onmouseenter onmouseleave  事件对象 event
        myCar.onmouseenter = function(e){
            

            // 阻止默认事件  a标签的默认事件  
            // e.preventDefault()

            // 阻止冒泡 
            // e.stopPropagation();
            shop.style.display = 'block';
            myCar.className += ' c';
        }
        myCar.onmouseleave = function(){

            shop.style.display = 'none';
            // myCar.className.replace(myCar.className,'car');


            myCar.removeAttribute('class');
            myCar.className = 'car';
        }
        myCar.parentNode.onmouseenter = function(){
            // alert(1111);
            console.log(111);
        }
        myCar.parentNode.parentNode.onmouseenter = function(){
            // alert(222);
            console.log(222);

        }



    </script>
    
</body>
</html>

View Code

js 实例1 实现购物车鼠标移动显示功能框；

猜你喜欢