So verwenden Sie natives JS zum Erstellen von Titeln und Inhalten, die die gemeinsame Nutzung von 4 Zeilen Effektcode beibehalten

Ein Effekt wird manchmal bei der Erstellung von Webseiten oder mobilen Endgeräten verwendet. Ähnlich wie bei der Anordnung von Artikeltiteln und Artikelbeschreibungen behalten sie immer die gleiche Anzahl von Zeilen bei und die Überschrift wird weggelassen Der Titelinhalt ist 1:3 oder 2:2 oder 3:1. Üben Sie diesen Effekt noch heute.

Prinzip der Implementierung: Zeilenhöhe zum Titel bzw. Inhalt hinzufügen, die Höhe des Titels durch seine eigene Zeilenhöhe dividieren, die Anzahl der Zeilen des Titels kennen , und dann den Inhalt zuweisen Nur die Anzahl der Zeilen.

<style>
	*{padding: 0;margin: 0; font-family: &#39;Microsoft Yahei&#39;}
	.book{
		width: 320px;
		border: 1px solid #ccc;
	}
	.bookli{
		padding: 5px 10px;
		border-bottom: 1px solid #ccc;
	}
	.bookdiv{
		width: 300px;
		overflow: hidden;
	}
	.title{
		color:#666;
		margin: 10px 0;
		line-height: 23px;   //标题的行高
	}
	.desc{
		line-height: 23px;   //内容的行高
		overflow: hidden; 
	}
</style>

<h2>十大名花排行榜</h2>
<div class="book">
	<ul>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
	</ul>
</div>

window.onload=function(){
	//兼容不能使用getElementsByClassName的浏览器
	function getClass(clas){
		var cls=document.getElementsByTagName('*');
		var arr=[];
		for(var i=0;i<cls.length;i++){
			if(clas==cls[i].className){
				arr.push(cls[i]);
			}
		}
		return arr;
	}
　　　　//控制行数的函数
	function controlRow(title,content){
		var title=getClass(title);
		var desc=getClass(content);
		var titleheight;
		var descheight;
		for(var j=0;j<title.length;j++){
			(function(index){
				// 获取css样式
				if(window.getComputedStyle!="undefined"){  //兼容火狐、谷歌等主流浏览器
					titleheight=window.getComputedStyle(title[index],null)[&#39;line-height&#39;];
					descheight=window.getComputedStyle(desc[index],null)[&#39;line-height&#39;];
				}else{   //兼容ie浏览器
					titleheight=title[index].currentStyle[&#39;line-height&#39;];
					descheight=desc[index].currentStyle[&#39;line-height&#39;];
				}
				var titleH=titleheight.substr(0,titleheight.length-2);
				var descH=descheight.substr(0,descheight.length-2);
				// 如果标题高度=行高，那么内容高度则是内容行高的3倍，内容+标题总是保持4行
				if(title[index].offsetHeight/titleH==1){
					desc[index].style.height=3*descH+&#39;px&#39;;
				}else if(title[index].offsetHeight/titleH==2){
					desc[index].style.height=2*descH+&#39;px&#39;;
				}else if(title[index].offsetHeight/titleH==3){
					desc[index].style.height=1*descH+&#39;px&#39;;
				}else{
					alert("sorry,浏览器不兼容");
				}
			})(j);
		}
	}
	controlRow(&#39;title&#39;,&#39;desc&#39;);
}

Getestet auf Google und Firefox. Ich habe eine Datei aus dem IE gelöscht und kann sie nicht öffnen. Also habe ich es nicht getestet. Freunde, die es getestet haben, können es mir auch sagen, danke.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie natives JS zum Erstellen von Titeln und Inhalten, die die gemeinsame Nutzung von 4 Zeilen Effektcode beibehalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!