div层的滑入滑出实例

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
position: absolute;

}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#btnFadein").bind("click", Fadein); //为btnFadein绑定click时间
$("#btnFadeout").bind("click", Fadeout); //为btnFadeout绑定click时间
});

function Fadein(){
$("#divD").slideDown("slow"); //滑入
}

function Fadeout(){
$("#divD").slideUp("slow"); //滑出
}
</script>
</head>
<body>
<input type="button" value="滑入" id="btnFadein" />
<input type="button" value="滑出" id="btnFadeout"/>
<div id="divD">这是div</div>
DIV
</body>
</html>

时间： 2024-10-29 19:06:34

div层的滑入滑出实例的相关文章

利用jQuery实现，蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量           position().left           position().top 获取元素相对于当前窗口的偏移量           offset().left           offset().top 步骤: 1.创建父元素.当前对象.蒙板 代码如下: <div class="wrap">  

JS——侧栏导航点击滑入滑出效果

对于定位的侧栏导航点击滑入滑出这一效果,我想很多人都明白原理,并且很简单的就能运用JS+Jquery就能做出.而且是一个非常常见的简单效果.在此呢,小码哥只是为了自己以后能够翻看,还有就是给那些刚入门javascript的新人们一点启发. 作为入门javascript的人来说,明白一个效果是怎么实现的尤为重要.即原理是怎么回事尤为重要!小码哥昨天在路上偶遇一应届毕业生,刚从青岛来北京找工作.是学计算机的,C及C++起步,由此基础,我说你学什么语言都有优势.必定逻辑基础有了不是!? 废话不说了,直

ios 页面滑入滑出

从左边滑进 CGRect r1,r2; r1 = app.testview.view.frame; r2 = self.view.frame; [app.testview.view setFrame:CGRectMake(320, r1.origin.y,r1.size.width,r1.size.height)]; [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:0.4]; [app.window a

jQuery动画效果之滑入滑出slideDown,slideUp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>滑入滑出</title> <meta charset="UTF-8"> <style type="text/css&q

WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过努力

类似通讯录分组的Android PinnedSectionListView，且分组标签悬停滑入滑出

 <类似通讯录分组的Android PinnedSectionListView,且分组标签悬停滑入滑出> 常用的联系人.通讯录,会按照联系人的姓氏从A,B,C,,,X,Y,Z,这样归类排列下去,方便用户快速查找和定位.PinnedSectionListView是一个第三方的开源框架,在github上的链接地址是:https://github.com/beworker/pinned-section-listview .Android PinnedSectionListView不仅是一个实现上

鼠标滑入滑出事件

$("#clo").mouseover(function(){//当id为clo的元素 鼠标滑入将id为hint_closs元素显示 $("#hint_closs").show(); }); $("#clo").mouseout(function(){//当id为clo的元素 鼠标滑出将id为hint_closs元素隐藏       $("#hint_closs").hide(); });

广告条滑入滑出

在html正文上面有一个广告,让整个文本向下滑动,让广告显示,然后再让广告滑到上面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告条滚动</title> <style type="text/css"> *{ padding: 0px; margin: 0 auto;

广告条滑入滑出源代码实现

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告条滚动</title> <style type="text/css"> *{ padding: 0px; margin: 0 auto; } #ad{ width:1000px; height:300px; font-si