用Jquery模拟的div-css.com中的JS特效
2007-11-06 17:07
639 查看
[align=right][/align]
用Jquery模拟的div-css.com中的JS特效
在DIV-CSS上的位置:
http://www.div-css.com/html/javascript/54219912025.html
我用jquery的实现,对原来的CSS进行了一些改动,让中间部分独立出来,这样便于应用jquery的slideToggle效果!~
从效果上看,是完全一样的,而且跨浏览器!原文的只能在IE下运行(小改动下,就支持FF了,呵呵~我不告诉他)
<style>
#content,#intro,#title{
font: 13px/25px;
width: 200px;
height: 40px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#content{
display:none;
height:500px;
border-top:0;
}
#intro {
color: #036;
font:12px;
border: 4px #ccc double;
border-top:0;
height:70px;
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script type="text/javascript" src="http://www.zendstudio.net/libs/jquery-1.2.1.js"></script>
<script>
$(function(){
$("#key").click(function(){
$(this).html()=='展开'?$(this).html('关闭'):$(this).html('展开');
$("#content").slideToggle('slow');
});
});
</script>
<div id="title">
孤雁儿
<br><br>
</div>
<div id="content">
世人作梅词,下笔便俗。予试作一篇,乃知前言不妄耳。<br><br>
藤床纸帐朝眠起,<br>
说不尽、无佳思。<br>
沈香烟断玉炉寒,<br>
伴我情怀如水。<br>
笛声三弄,<br>
梅心惊破,<br>
多少春情意。<br><br>
小风疏雨萧萧地,<br>
又催下、千行泪。<br>
吹箫人去玉楼空,<br>
肠断与谁同倚?
一枝折得,<br>
人间天上,<br>
没个人堪寄。
</div>
<div id="intro" ><hr>作者:李清照<span id="key">展开</span><br>来源:中国诗辞网</div>
<div style="color:red;margin-top:20px;">dp.SyntaxHighlighter高亮插件已修正升级,若您发现预览不正常,欢迎给我留言,报告BUG,我一定尽全力修正!</div>
本文最初发表于我的博客:
预览本文效果欢迎前往:
http://www.zendstudio.net/read.php/70.htm
用Jquery模拟的div-css.com中的JS特效
在DIV-CSS上的位置:
http://www.div-css.com/html/javascript/54219912025.html
我用jquery的实现,对原来的CSS进行了一些改动,让中间部分独立出来,这样便于应用jquery的slideToggle效果!~
从效果上看,是完全一样的,而且跨浏览器!原文的只能在IE下运行(小改动下,就支持FF了,呵呵~我不告诉他)
<style>
#content,#intro,#title{
font: 13px/25px;
width: 200px;
height: 40px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#content{
display:none;
height:500px;
border-top:0;
}
#intro {
color: #036;
font:12px;
border: 4px #ccc double;
border-top:0;
height:70px;
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script type="text/javascript" src="http://www.zendstudio.net/libs/jquery-1.2.1.js"></script>
<script>
$(function(){
$("#key").click(function(){
$(this).html()=='展开'?$(this).html('关闭'):$(this).html('展开');
$("#content").slideToggle('slow');
});
});
</script>
<div id="title">
孤雁儿
<br><br>
</div>
<div id="content">
世人作梅词,下笔便俗。予试作一篇,乃知前言不妄耳。<br><br>
藤床纸帐朝眠起,<br>
说不尽、无佳思。<br>
沈香烟断玉炉寒,<br>
伴我情怀如水。<br>
笛声三弄,<br>
梅心惊破,<br>
多少春情意。<br><br>
小风疏雨萧萧地,<br>
又催下、千行泪。<br>
吹箫人去玉楼空,<br>
肠断与谁同倚?
一枝折得,<br>
人间天上,<br>
没个人堪寄。
</div>
<div id="intro" ><hr>作者:李清照<span id="key">展开</span><br>来源:中国诗辞网</div>
<div style="color:red;margin-top:20px;">dp.SyntaxHighlighter高亮插件已修正升级,若您发现预览不正常,欢迎给我留言,报告BUG,我一定尽全力修正!</div>
本文最初发表于我的博客:
预览本文效果欢迎前往:
http://www.zendstudio.net/read.php/70.htm
相关文章推荐
- 用div+js+css模拟select
- 实用带多种CSS动画特效的jQuery弹出层插件hDialog.js
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- 商品产品列表分类可右侧展开详细分类DIV+CSS+JS特效
- DIV+CSS网页布局对SEO的四大影响(转自www.jqueryba.com)
- js+div+css 模拟弹出对话框
- js全页面刷新方法+jquery之超简单的div显示和隐藏特效demo
- DIV+CSS+JS仿Select下拉表单网页特效源代码下载
- JS、JQuery、CSS+DIV实例大全
- DIV+CSS网页布局对SEO的四大影响(转自www.jqueryba.com)
- js,jquery,css,html5特效
- DIV+CSS+JS仿Select下拉表单网页特效源代码下载
- js,jquery,css,html5特效
- DIV+CSS网页布局对SEO的四大影响(转自www.jqueryba.com)
- div模拟的下拉框特效jquery
- DIV+CSS+JS不间断横向滚动实现代码
- 同时处理html+js+jquery+css的插件安装(Spket&Aptana插件安装)
- Div+Css+JS做多个显示/隐藏内容块
- 简单的div+css+jquery菜单导航
- JQuery鼠标经过弹出气泡框的js特效效果...