jQuery melaksanakan pengembangan teks dan effect_jquery penguncupan

WBOY
Lepaskan: 2016-05-16 15:57:01
asal
1054 orang telah melayarinya

Hanya terdapat kawasan kecil pada halaman web, tetapi teks penerangannya sangat panjang. Skrip berikut melaksanakan paparan separa teks panjang.
Apabila pengguna mengklik untuk mengembangkan, teks mengembang, dan apabila pengguna mengklik untuk mengembangkan, teks mengecut.

Pada asalnya saya boleh menulisnya menggunakan toggle() yang disertakan dengan jQuery, tetapi apabila saya melakukannya, togol tidak pernah berfungsi, jadi saya menggunakan bendera klik untuk melakukannya

<script language="javascript" src="jquery.js"></script>
<script language="javascript">
var cur_status = "less";
$.extend({
show_more_init:function(){
//alert("show_more_init!");
var charNumbers=$(".content").html().length;//总字数
var limit=100;//显示字数
if(charNumbers>limit)
{
var orgText=$(".content").html();//原始文本
var orgHeight=$(".content").height();//原始高度
var showText=orgText.substring(0,limit);//最终显示的文本
$(".content").html(showText);
var contentHeight=$(".content").height();//截取内容后的高度
$(".switch").click(
function() {
if(cur_status == "less"){
$(".content").height(contentHeight).html(orgText).animate({ height:orgHeight}, { duration: "slow" });
$(this).html("收缩");
cur_status = "more";
}else{
$(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, { duration: "fast" });
$(this).html("展开");
cur_status = "less";
}
}
);
}
else
{
$(".switch").hide();
}
}
});
$(document).ready(function(){
$.show_more_init();
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
#limittext{
width:640px;
height:auto;
position:relative;
background-color:#ccc;
color:black;
}
.switch{
font-size:12px;
text-align:center;
cursor:pointer;
font-family:Verdana;
font-weight:800;
position:absolute;
bottom:0;
width:100%;
/*background:url(more-bg.png) repeat-x bottom;*/
height:40px;
line-height:80px;
}
</style>
</head>
<body>
<div id="limittext" >
<div class="content" style="padding-bottom:15px;">
这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字,这是很长的一段文字
</div>
<div class="switch">展开</div>
</div>
</body>
</html>
Salin selepas log masuk

Kaedah 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现DIV层的收缩展开效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
  $(".box h1").toggle(function(){
   $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
  },function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
  });
});
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
</div>
</div>
<br />

<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
    1<br />
    2<br />
</div>
</div>
<br>
<font color=red>第一次运行请刷新一下页面。</font>
</body>
</html>
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan