页面布局设计杂记

项目中收录两个例子

一：因为项目中数据库字段存有dom结构的内容，页面又只需要显示内容的一部分多余的二用...代替

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8" /> 
<title>jQuery下拉收缩特效</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
 <script type="text/javascript">  
    $(function () {  
        $(".figcaption").each(function (i) {  
            var divH = $(this).height();  
            var $p = $("p", $(this)).eq(0);  
            while ($p.outerHeight() > divH) {  
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));  
            };  
        });  
        });  
    </script>  
    <style>  
        .figcaption  
        {  
            background: #EEE;  
            width: 410px;  
            height: 3em;  
            margin: 1em;  
        }  
        .figcaption p  
        {  
            margin: 0;  
            line-height: 1.5em;  
        }  
    </style>  
</head>  
<body>  
    <div class="figcaption">  
        <p>  
            You <span>123</span>probably can't do it (currently?) without a fixed-width font like Courier. With  
            a fixed-width font every letter occupies the same horizontal space, so you could  
            probably count the letters and multiply the result with the current font size in  
            ems or exs. Then you would just have to test how many letters fit on one line, and  
            then break it up.</p>  
    </div>  
</body>  
</html>

二.向下滑动显示内容，向上滑动隐藏内容

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8" /> 
<title>jQuery下拉收缩特效</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".btn-slide").click(function(){ 
$("#panel").slideToggle("slow"); 
$(this).toggleClass("active"); return false; 
}); 
}); 
</script> 
<style type="text/css"> 
body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } 
a:focus { outline: none; } 
#panel { background: #69C7F7; height: 200px; display: none; } 
.slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } 
.btn-slide { background: #F27613 url(http://files.jb51.net/file_images/article/201212/20121225165932118.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } 
.active { background-position: right 12px; } 
</style> 
</head> 
<body> 
<h1>演示不了 请刷新下</h1> 
<div style="display: block;" id="panel"> 
<!-- you can put content here --> 
</div> 
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p> 
</body> 
</html>

页面布局设计杂记

猜你喜欢