javascript滑动伸缩效果(兼容IE/FF)

来源：互联网发布：淘宝评论推广编辑：程序博客网时间：2024/05/09 18:20

<?xml version="1.0" encoding="gb2312"?><!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" lang="gb2312"><head><title>诗词展示</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="generator" content="editplus" /><meta name="author" content="天青·卫" /><meta name="keywords" content="" /><meta name="description" content="" /><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* {margin:0; padding:0; border:0;}body {/* */}ul {list-style-type:none;}li {/*float:left;*/margin:10px;width:200px;border:4px double #ccc;background:#eee;}li .main,li .intro {margin:5px 5px 0 5px;font-size:12px;}li .main {height:25px;overflow:hidden;line-height:22px;}#main1 {height:380px;}li h3 {margin:0 5px 5px;}li p{margin:8px 0;font-size:14px;color:#111;}li .mainf {line-height:15px;/*font-style:italic;*/font-size:12px;color:#333;}li .intro {padding:3px 0 0;color:#036;line-height:18px;border-top:1px dotted #366;}li .key {float:right;margin-top:-20px;color:#900;cursor:pointer;}</style></head><body><ul><li><div class="main" id="main1"><h3>孤雁儿</h3><p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p><p>藤床纸帐朝眠起，<br />说不尽、无佳思。<br />沈香烟断玉炉寒，<br />伴我情怀如水。<br />笛声三弄，<br />梅心惊破，<br />多少春情意。</p><p>小风疏雨萧萧地，<br />又催下、千行泪。<br />吹箫人去玉楼空，<br />肠断与谁同倚？<br />一枝折得，<br />人间天上，<br />没个人堪寄。</p></div><div class="intro">作者：李清照<br />来源：中国诗辞网<span class="key" onclick="fn(this,1)">折叠</span></div></li><li><div class="main" id="main2"><h3>孤雁儿</h3><p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p><p>藤床纸帐朝眠起，<br />说不尽、无佳思。<br />沈香烟断玉炉寒，<br />伴我情怀如水。<br />笛声三弄，<br />梅心惊破，<br />多少春情意。</p><p>小风疏雨萧萧地，<br />又催下、千行泪。<br />吹箫人去玉楼空，<br />肠断与谁同倚？<br />一枝折得，<br />人间天上，<br />没个人堪寄。</p></div><div class="intro">作者：李清照<br />来源：中国诗辞网<span class="key" onclick="fn(this,2)">展开</span></div></li><li><div class="main" id="main3"><h3>孤雁儿</h3><p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p><p>藤床纸帐朝眠起，<br />说不尽、无佳思。<br />沈香烟断玉炉寒，<br />伴我情怀如水。<br />笛声三弄，<br />梅心惊破，<br />多少春情意。</p><p>小风疏雨萧萧地，<br />又催下、千行泪。<br />吹箫人去玉楼空，<br />肠断与谁同倚？<br />一枝折得，<br />人间天上，<br />没个人堪寄。</p></div><div class="intro">作者：李清照<br />来源：中国诗辞网<span class="key" onclick="fn(this,3)">展开</span></div></li><li><div class="main" id="main4"><h3>孤雁儿</h3><p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p><p>藤床纸帐朝眠起，<br />说不尽、无佳思。<br />沈香烟断玉炉寒，<br />伴我情怀如水。<br />笛声三弄，<br />梅心惊破，<br />多少春情意。</p><p>小风疏雨萧萧地，<br />又催下、千行泪。<br />吹箫人去玉楼空，<br />肠断与谁同倚？<br />一枝折得，<br />人间天上，<br />没个人堪寄。</p></div><div class="intro">作者：李清照<br />来源：中国诗辞网<span class="key" onclick="fn(this,4)">展开</span></div></li></ul><mce:script type="text/javascript"></mce:script></body></html>