仿淘宝网产品名称展开与折叠的特效代码

发布时间：2018-08-18 17:39:53 所属栏目：创业来源：站长网

导读：仿淘宝网产品名称展开与折叠的特效代码仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一

　　仿淘宝网产品名称展开与折叠的特效代码

　　仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一样，平时只显示最觉的一些产品名称，当用户选择了更多的时候才展开全部的名称。

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> </head> <title>产品名称展开、折叠</title> <body> <div id="main" style="width:600px;" > <div class="" style="position:relative; float:left; width:600px;"> <div> <div id="title1" style="float:left;" >分类一</div> <div class="bt" style="float:right;"><img id="button1" style="float:right;" onClick="show('button1','contain1');" src="http://www.veryhuo.com.net/uploads/allimg/1008/arrow0.gif"></div> </div> <div id="contain1" style="clear:both;padding:20px;overflow:hidden;"> 仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一样，平时只显示最觉的一些产品名称，当用户选择了更多的时候才展开全部的名称。仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一样，平时只显示最觉的一些产品名称，当用户选择了更多的时候才展开全部的名称。 </div> </div> <div > <div id="title3" style="float:left;" >分类二</div> <img id="button3" style="float:right;" onClick="show('button2','contain2');" src="http://www.veryhuo.com.net/uploads/allimg/1008/arrow0.gif"></div> <div id="contain3" style="clear:both;padding:20px;overflow:hidden;"> 仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一样，平时只显示最觉的一些产品名称，当用户选择了更多的时候才展开全部的名称。仿淘宝网站的产品名称展开以及折叠的代码，这种效果是不是朋友们见得很多了，哈，在许多电影网有这种效果，电影简介一般是折叠的，仔细看的时候可点击一个小按钮会显示全部的内容，就像淘宝网的列表页内的产品名称一样，平时只显示最觉的一些产品名称，当用户选择了更多的时候才展开全部的名称。</div> <div id="title2" style="float:left;" >分类三</div> <img id="button2" style="float:right;" onClick="show('button2','contain2');" src="http://www.veryhuo.com.net/uploads/allimg/1008/arrow0.gif"> </div> <div id="contain2" style="clear:both;padding:20px;overflow:hidden;"><a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> <a href="#">理肤</a> </div> </div> <script type="text/javascript" > function $(id){ return document.getElementById(id); } function hide(c,m){ if($(c).innerHTML.length>200){ $(c).setAttribute("r",$(c).innerHTML); $(c).innerHTML=$(c).innerHTML.substr(0,150)+""; } $(m).src="http://www.veryhuo.com.net/uploads/allimg/1008/arrow0.gif"; $(m).onclick=function(){show(c,m)}; } function show(c,m){ $(c).innerHTML=$(c).getAttribute("r") || $(c).innerHTML; $(m).src="http://www.veryhuo.com.net/uploads/allimg/1008/arrow1.gif"; $(m).onclick=function(){hide(c,m)}; } hide("contain1","button1"); hide("contain2","button2"); hide("contain3","button3"); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

躺赚，坐等收钱的项目	微盟与复星达成战略合
一切的成功，全归功于	2021，做个健身教练没