页面布局设计杂记

最新推荐文章于 2019-08-13 17:00:22 发布

csm1995

最新推荐文章于 2019-08-13 17:00:22 发布

阅读量218

点赞数

分类专栏：前端杂记

本文链接：https://blog.csdn.net/qq_35804654/article/details/78753961

版权

前端杂记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目中收录两个例子

一：因为项目中数据库字段存有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>

csm1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局设计杂记

项目中收录两个例子一：因为项目中数据库字段存有dom结构的内容，页面又只需要显示内容的一部分多余的二用...代替 jQuery下拉收缩特效 $(function () { $(".figcaption").each(function (i) { var divH = $(this).height();
复制链接

扫一扫

专栏目录