返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

手机版弹出栏目菜单,设计单页相册

2020-05-11 文章标签: 插件 js教程 浏览次数:

我们继续讲解jquery操作事件中,js设计覆盖面板,常用于点击弹出网站栏目的效果。还有设计单页相册,类似一个手机版图片列表的页面

jquery操作创建元素

1.设计覆盖面板设计覆盖面板

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$('#popupOverlayPanel').live('popupbeforeposition', function(){
    var h = $(window).height();
    $("#popupOverlayPanel").css("height", h);
});
</script>
<style type="text/css">
#popupOverlayPanel-popup {
    right: 0 !important;
    left: auto !important;
}
#popupOverlayPanel {
    width: 200px;
    border: 1px solid;
    border-right: none;
    background: rgba(0,0,0,.4);
    margin: -1px 0;
}
#popupOverlayPanel .ui-btn { margin: 2em 15px; }
</style>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>使用弹出页面</h1>
    </div>
    <div data-role="content">
        <a href="#popupOverlayPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button" data-inline="true"> 弹出覆盖面板 </a>
        <div data-role="popup" id="popupOverlayPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">
            <button data-theme="b" data-icon="back" data-mini="true">返回</button>
            <button data-theme="b" data-icon="grid" data-mini="true">菜单</button>
            <button data-theme="b" data-icon="plus" data-mini="true">添加</button>
        </div>
    </div>
</div>
</body>
</html>

2.设计单页相册手机版图片列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
    <a href="#popup_1" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p1.jpg" style="width:49%">
    </a>
    <a href="#popup_2" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p2.jpg" style="width:49%">
    </a>
    <a href="#popup_3" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p3.jpg" style="width:49%">
    </a>
    <a href="#popup_4" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p4.jpg" style="width:49%">
    </a>
    <a href="#popup_5" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p5.jpg" style="width:49%">
    </a>
    <a href="#popup_6" data-rel="popup" data-position-to="window">
        <img src="//freemuban.com/js/511/p6.jpg" style="width:49%">
    </a>
    <div data-role="popup" id="popup_1">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p1.jpg" style="max-height:512px;" alt="pic1">
    </div>
    <div data-role="popup" id="popup_2">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p2.jpg" style="max-height:512px;" alt="pic2">
    </div>
    <div data-role="popup" id="popup_3">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p3.jpg" style="max-height:512px;" alt="pic3">
    </div>
    <div data-role="popup" id="popup_4">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p4.jpg" style="max-height:512px;" alt="pic4">
    </div>
    <div data-role="popup" id="popup_5">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p5.jpg" style="max-height:512px;" alt="pic5">
    </div>
    <div data-role="popup" id="popup_6">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="//freemuban.com/js/511/p6.jpg" style="max-height:512px;" alt="pic6">
    </div>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。