对图片的样式修改以及插入js弹窗

最新推荐文章于 2024-07-12 14:13:53 发布

不要叫我小俊俊

最新推荐文章于 2024-07-12 14:13:53 发布

阅读量463

点赞数

分类专栏： css 文章标签：图片 javascript

本文链接：https://blog.csdn.net/q812258983/article/details/78468756

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>欢迎光临Coding Coffee</title>
  <style type="text/css">
        .a{ text-align:center}

        .sideber{
        background-color:#333;
        position:fixed;
        width:200px;
        top:0;
        right:-300px;
        bottom:0;
        padding:40px 0;
        }
        .sideber ul{
        margin:0;
        padding:0;
        list-style:none;
        }
        .sideber ul a{
        color:white;
        text-decoration:none;
        padding: 10px 30px;
        display:inline-block;
        width:100%;
        }
        .sideber ul a:hover{
        background-color:#444
        }
        .mask{
        display:none;
        background-color: rgba(0,0,0,0.3);
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        }
        .userpic{
        width:50px;
        height:50px;
        border-radius:50px;
        border: 2px solid #eee;
        position:fixed;
        top:10px;
        right:5px;
        }

  </style>
 </head>
 <body>
    <div class="a">
    <h1>欢迎光临Coding Coffee</h1>
    <img src="./img/3.png">
    <p>
    敬请关注我们定期的<a href="test.html">产品列表</a>
    coding coffee是一家只对程序员开放的<em>互联网咖啡馆.</em>
    </p>
    <p>
    请查看我们的<a href="D:\我的html\Untitled2.html">分店</a>
    </p>
    </div>
    <div>
    <img class="userpic" src="./img/5.jpg">
    </div>
    <div class="mask"></div>
    <div class="sideber">
        <ul>
            <li><a href="#">关于我</a></li>
            <li><a href="#">想约我吗?</a></li>
            <li><a href="#">包养我。。</a></li>
            <li><a href="#">与君共勉</a></li>
            <li><a href="#">。。。</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
 </body>
</html>

js代码

var sidebar = $（'.sidebar'）;
var mask = $('.mask');
var sidebar_trigger = $（'.userpic'）

function showSideBar(){
    mask.fadeIn();
    sidebar.css('right',0);
}
function hideSideBar(){
    mask.fadeOut();
    sidebar.css('right',-sidebar.width());
}

sidebar_trigger.on('click',showSideBar);
mask.on('click',hideSideBar);

不要叫我小俊俊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对图片的样式修改以及插入js弹窗

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎光临Coding Coffee</title> <style type="text/css"> .a{ text-align:center} .sideber{ background-color:#
复制链接

扫一扫

专栏目录