zoukankan      html  css  js  c++  java
  • 鼠标经过出现左拉菜单

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0;padding:0;}
            .div1{
                position:relative;
                width:300px;
                height:46px;
                margin:20px auto;
                border:1px solid red;
                overflow:hidden;
            }
            .div1 a{height:46px;}
            .div1 a i{position:absolute;right:0;display:inline-block;width:46px;height:46px;background:green;z-index:100}
            .div1 a span{/*transition:all 2s;*/height:46px;position:absolute;right:-16px;background:green;z-index:10;border-top-left-radius:5px;border-bottom-left-radius:5px;}
        </style>
    </head>
    <body>
    <div class="div1">
        <a href="javascript:void(0);">
            <i class="div_img">666</i>
            <span class="c">回到顶部</span>
        </a>
    </div>
    </body>
    <script src="js/jquery-1.9.0.js"></script>
    <script>
        var timer;
        $(".div1").find("a").hover(function(){
            clearTimeout(timer);
            timer=window.setTimeout(function(){$(".c").animate({"right":"46px"});},300)
        },function(){
            clearTimeout(timer);
            $(".c").animate({"right":"-16px"});
        });
    
    </script>
    </html>
  • 相关阅读:
    JDBC的简单笔记
    javascript学习笔记二
    javascript学习一、js的初步了解
    css的简单学习笔记
    c++ 拷贝构造函数
    C++ new delete
    c++ 析构函数
    c++成员初始化和构造函数
    C++ 类和对象浅解
    c++ constexpr
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749921.html
Copyright © 2011-2022 走看看