jquery.foldit实现立体折叠下拉图文列表效果代码-html代码-BFW代码库

jquery.foldit实现立体折叠下拉图文列表效果代码

代码语言：html

所属分类：其他

代码描述：jquery.foldit实现立体折叠下拉图文列表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foldit.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.mobile-1.4.1.min.css">
    <style>
        .ui-page {
	background:#666 !important;
}
.ui-bar {
	height:1000px
}
.phone {
	width:304px;
	height:800px;
	padding:108px 27px  0 27px;
	margin:30px auto;
	background:url(//repo.bfw.wiki/bfwrepo/images/menu/phone.png) no-repeat
}
@media (max-width:640px) {
	.phone {
	width:auto;
	height:544px;
	padding:0;
	margin:0px auto;
	background:none
}
}
    </style>
</head>

<body>
    <div class="phone">
        <ul data-role="listview" class="folditmenu" data-inset="true" data-theme="a">
            <li>
                <a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
                    <h2>Broken Bells</h2>
                    <p>Broken Bells</p>
                </a>
            </li>
            <li>
                <a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
                    <h2>Warning</h2>
                    <p>Hot Chip</p>
                </a>
            </li>
            <li>
                <a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
                    <h2>Wolfgang Amadeus Phoenix</h2>
                    <p>Phoenix</p>
               .........完整代码请登录后点击上方下载按钮下载查看