关于sharejs.com
JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。
分享JavaScript
JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。
快乐JavaScript
JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。
CSS样式应用
JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。
Sample heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
可以对指定的模块进行删除，带有渐变的删除效果，非常好的JQuery应用
第一步：
点击这里下载JQuery.js及相关图片
第二步：
在网页<head>区添加以下代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 470px;
font-size:12px;
}
h3 {
margin: 0;
padding: 0 0 .3em;
}
p {
margin: 0;
padding: 0 0 .5em;
}
.pane {
background: #edf5e1;
padding: 10px 20px 10px;
position: relative;
border-top: solid 2px #c4df9b;
}
.pane .delete {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
第三步：
在网页<body>区添加以下代码
<div class="pane"> <h3>关于sharejs.com</h3> <p>JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。</p> <img src="images/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>分享JavaScript</h3> <p>JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。</p> <img src="images/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>快乐JavaScript</h3> <p>JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。</p> <img src="images/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>CSS样式应用</h3> <p>JavaScript分享网诞生于2008年6月。sharejs力争为您带来最优秀的JavaScript代码。</p> <img src="images/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Sample heading</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> <img src="images/btn-delete.gif" alt="delete" class="delete" /> </div>
按照如下形式可以添加一个新的带删除按钮模块
<div class="pane"> <h3>Sample heading</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> <img src="/code/ajax/jquery/02/images/btn-delete.gif" alt="delete" class="delete" /> </div>
