JavaScript 实例：当当网点击展开效果

关键代码：

<script type="text/javascript">
function shopping_commend_show(imgObj)
{/*通过改变css的display属性值来实现展开收起的效果(1)更换单击的小箭头图片(2)更换内容的display属性的值*///获id=shopping_commend_sort的元素对象var divObj = document.getElementById("shopping_commend_sort");//判断divObj的display属性的值if(divObj.style.display == "block"){//更改其值为none，隐藏起来divObj.style.display = "none";imgObj.src = "images/shopping_arrow_down.gif";}else{//显示出来divObj.style.display = "block";imgObj.src = "images/shopping_arrow_up.gif";}
}
</script>

完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网购物车页面</title><style type="text/css">body{margin:0px;padding:0px;font-size:12px;line-height:20px;color:#333;}ul,li{list-style:none;margin:0px;padding:0px;}.shopping_commend{background-image:url(../images/shopping_commend_bg.gif);background-repeat:repeat-x;height:21px;border:solid 1px #999;}.shopping_commend_left{float:left;padding-left:10px;}.shopping_commend_right{float:right;padding-right:10px;margin-top:3px;}.shopping_commend_right img{cursor:pointer;}
#shopping_commend_sort{border:solid 1px #999;border-top:0;padding:5px 20px 5px 20px;height:120px;}.shopping_commend_sort_left{float:left;width:450px;}.shopping_commend_sort_mid{float:left;width:15px;background-image:url(../images/shopping_dotted.gif);background-repeat:repeat-y;height:120px;}.shopping_commend_list_1,.shopping_commend_list_2,.shopping_commend_list_3,.shopping_commend_list_4{float:left;height:30px;line-height:30px;}.shopping_commend_list_1{width:240px;}.shopping_commend_list_2{width:70px;text-align:center;text-decoration:line-through;color:#999;}.shopping_commend_list_3{width:70px;text-align:center;}.shopping_commend_list_4{text-align:center;width:65px;}</style><script type="text/javascript">
function shopping_commend_show(imgObj)
{/*通过改变css的display属性值来实现展开收起的效果(1)更换单击的小箭头图片(2)更换内容的display属性的值*///获id=shopping_commend_sort的元素对象var divObj = document.getElementById("shopping_commend_sort");//判断divObj的display属性的值if(divObj.style.display == "block"){//更改其值为none，隐藏起来divObj.style.display = "none";imgObj.src = "images/shopping_arrow_down.gif";}else{//显示出来divObj.style.display = "block";imgObj.src = "images/shopping_arrow_up.gif";}
}</script>
</head><body><!--为您推荐商品开始--><div class="shopping_commend" style="width:960px;  margin:0px auto;"><div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div><div class="shopping_commend_right"><img onClick="shopping_commend_show(this)" src="data:images/shopping_arrow_up.gif" alt="shopping" ></div></div><div id="shopping_commend_sort" style="display:block; width:960px; margin:0px auto;padding:0px;"><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li><li class="shopping_commend_list_2">￥39.00</li><li class="shopping_commend_list_3">￥29.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（当当网独家首发）</a></li><li class="shopping_commend_list_2">￥28.00</li><li class="shopping_commend_list_3">￥19.40</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li><li class="shopping_commend_list_2">￥32.80</li><li class="shopping_commend_list_3">￥25.10</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li><li class="shopping_commend_list_2">￥36.00</li><li class="shopping_commend_list_3">￥27.70</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div><div class="shopping_commend_sort_mid"></div><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li><li class="shopping_commend_list_2">￥59.00</li><li class="shopping_commend_list_3">￥47.20</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li><li class="shopping_commend_list_2">￥34.80</li><li class="shopping_commend_list_3">￥20.60</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li><li class="shopping_commend_list_2">￥39.80</li><li class="shopping_commend_list_3">￥30.50</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li><li class="shopping_commend_list_2">￥25.00</li><li class="shopping_commend_list_3">￥17.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div></div></body>
</html>

JavaScript 实例：当当网点击展开效果相关推荐

JavaScript 实例：当当网首页选项卡切换效果
关键代码: <script type="text/javascript"> function showMe(index) {//book_type_out是类名,类名绑 ...
html可移动的悬浮按钮,js仿苹果悬浮可拖拽按钮，并且点击展开效果
今天写了一个仿苹果的悬浮按钮,由于只在右侧展开,所以只能上下拖拽,展开效果入下 1.html 2.css @charset "gb2312"; .info-nr {position ...
html实现文字隐藏展开特效代码,js实现点击展开隐藏效果（实例代码）
js实现点击展开隐藏效果(实例代码) 发布时间:2020-09-20 10:47:49 来源:脚本之家阅读:69 作者:laozhang 本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码 ...
JavaScript 实例：当当网购物车统计总价
当当网购物车统计总价.循环表格所有行(或列)统计计算总价. 关键代码: <script type="text/javascript"> function product ...
android 评论的展开功能,Android开发实现ListView点击展开收起效果示例
本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的布局文件很简单 ...
html叠加层,JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtm ...
android 展开收起功能,Android开发实现ListView点击展开收起效果示例
本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的布局文件很简单 ...
简单的点击展开/关闭效果
<script type="text/javascript"> <!-- $(document).ready(function() { $(function(){ ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...

JavaScript 实例：当当网点击展开效果

JavaScript 实例：当当网点击展开效果相关推荐

最新文章

热门文章

JavaScript 实例：当当网 点击展开效果

JavaScript 实例：当当网 点击展开效果相关推荐

最新文章

热门文章

JavaScript 实例：当当网点击展开效果

JavaScript 实例：当当网点击展开效果相关推荐