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

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 图层样式 -> 仿淘宝网站的产品名称展开与折叠的代码

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

作者:admin 发布时间:2010-8-9 1:37:01 发布人: admin

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</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://web.archive.org/web/20150530084512im_/http://myjs.jz123.cn/upimg/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://web.archive.org/web/20150530084512im_/http://myjs.jz123.cn/upimg/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://web.archive.org/web/20150530084512im_/http://myjs.jz123.cn/upimg/arrow0.gif">
</div>
<div id="contain2" style="clear:both;padding:20px;overflow:hidden;"><a href="http://web.archive.org/web/20150530084512/http://www.tianqila.com/">天气预报</a> <a href="http://web.archive.org/web/20150530084512/http://www.bankcha.com/">个人贷款</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://web.archive.org/web/20150530084512/http://myjs.jz123.cn/upimg/arrow0.gif";
  $(m).onclick=function(){show(c,m)};
}
function show(c,m){
	$(c).innerHTML=$(c).getAttribute("r") || $(c).innerHTML;
	$(m).src="http://web.archive.org/web/20150530084512/http://myjs.jz123.cn/upimg/arrow1.gif";
  $(m).onclick=function(){hide(c,m)};
}
hide("contain1","button1");
hide("contain2","button2");
hide("contain3","button3");
</script>
</body>
</html>

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

将本文收藏到QQ书签与更多好友分享

上一篇：文章：超逼真的JS图片放大镜下一篇：文章：始终随屏滚动的JavaScript代码(漂浮广告)

网页特效

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

本类浏览排行 »

本站推荐文章 »