无意中看到如何实现一张图片从下往上慢慢显现出来这个问题，弄了半天还是从上往下的效果，纠结了，最后还是提问人自己搞定了！不过哈哈，又学到一点知识！
1.下面是我自己做的效果(按钮可以点哦)
<!--跑马灯效果-->
<script type="text/javascript">// <![CDATA[ $(document).ready(function () { $("#display_pic").click(function () { $("#pic").animate({ height: "300px" }, 1000); }); $("#nodisplay_pic").click(function () { $("#pic").animate({ height: "0" }, 1000); }); }); // ]]></script>
<!--width 宽 height高 bgcolor背景颜色 direction滚动方向 behavior行为（滚动方式）:值有scroll（表示由一端滚动到另一端，会重复。）slide（表示由一端滚动到另一端，不会重复。）alternate（表示在两端之间来回滚动） scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数 onmouseover="this.stop()" onmouseout="this.start()"鼠标经过的时候停止，离开的时候继续滚动--> 图片由下至上逐渐显示
2.代码如下：
<!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"> <head> <title>图片由下至上逐渐显示</title> <script type="text/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"></script> <style type="text/css"> #pic {position:absolute;height:0px;width:300px;bottom:0px;} .div_pic {height:300px;width:300px;position:relative;margin-top: 10px;} .div_display{ width:300px; height:25px; float:left;margin-top: 10px;} #display_pic { width:20px;float:left; width:50px; height: 25px;} #nodisplay_pic {width:20px;float:right;width:50px; height: 25px;} #content{ width:300px; margin:auto;} marquee { color: #16A9F5; cursor: default;} </style> </head> <body> <div id="content"> <!--跑马灯效果--> <div> <!--width 宽 height高 bgcolor背景颜色 direction滚动方向 behavior行为（滚动方式）:值有scroll（表示由一端滚动到另一端，会重复。）slide（表示由一端滚动到另一端，不会重复。）alternate（表示在两端之间来回滚动） scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数 onmouseover="this.stop()" onmouseout="this.start()"鼠标经过的时候停止，离开的时候继续滚动--> <marquee behavior="alternate" scrollamount='3' scrolldelay='1' direction= 'Left' width='300' onmouseover='this.stop()' onmouseout='this.start()' > 图片由下至上逐渐显示 </marquee> </div> <!--图片显示--> <div class="div_pic"> <img id="pic" src="images/mid_092958565.jpg" alt="" /> </div> <!--按钮--> <div class="div_display"> <input id="display_pic" type="button" value="显示" /> <input id="nodisplay_pic" type="button" value="取消" /> </div> </div> <script type="text/javascript"> $(document).ready(function () { $("#display_pic").click(function () { $("#pic").animate({ height: "300px" }, 1000); }); $("#nodisplay_pic").click(function () { $("#pic").animate({ height: "0" }, 1000); }); }); </script> </body> </html>
PS：HTML源码编辑器“不支持<marquee>标签，跑马灯的效果就没有了，需要的朋友可以复制代码自己在浏览器上看看效果 #^_^#
相关推荐
在图片切换时，我们可以控制图片的显示区域逐渐从上至下或从下至上展开。这可以通过改变图片显示区域的高度来实现，每次切换时调整这个高度，直到整个图片完全展示。这种效果可以通过在TTimer的OnTimer事件中实现，...
为了实现由下向上的弹出效果，可能还需要在显示之前启动动画。 5. **事件监听**：Dialog通常需要处理用户的点击事件，比如关闭Dialog或者执行其他操作。这可以通过为Dialog中的按钮设置OnClickListener来实现。 6....
百叶窗效果通常是图片逐行或逐列逐渐显示，营造出类似百叶窗打开的感觉；卷帘效果则可能是图片从上至下或从下至上，从左至右或从右至左逐步滚动展现。这些动态效果可以通过CSS3的过渡（transition）和动画...
7. **上下滑动**：图片从上至下或从下至上滑动，适用于垂直方向的布局。 三、应用场景： 1. **产品展示**：在电商网站中，可以用来展示商品细节，吸引用户注意力。 2. **新闻轮播**：在新闻网站上，用于显示最新的...
3. 反转图像：遍历原始图像的像素，从下至上反向复制到倒影图像中。由于是倒影，所以需要镜像反转Y轴。 4. 渐变融合：为了使倒影看起来自然，可以在倒影与原始图像的交界处添加一个渐变过渡，通常是透明度逐渐增加的...
当文本完全滚动出屏幕后，可以实现拉幕效果，让Label控件从下至上或上至下逐渐显现或消失。 以下是一个简单的VB代码示例，演示了从右向左滚动和向上拉幕的效果： ```vbnet Public Class Form1 Dim caption As ...
当图片正在切换时，进度条会逐渐填充，直到满格表示切换完成。 4. **自动切换**：此功能使得焦点图能够在设定的时间间隔后自动切换到下一张图片，无需用户手动操作。自动切换与进度条相结合，为用户提供了一种流畅...
在21世纪初，中国网吧文化逐渐兴起，随之而来的对网吧管理软件的需求也日益增加。在这样的市场背景下，万象网络管理软件凭借其独特优势迅速占领了市场。从2004年至2008年，该软件经历了多次版本升级，每一次升级都...
为了吸引新用户、维护现有用户和争取竞争对手的用户，各家公司纷纷施展策略，从补贴、运营、营销到公关等多个方面发力，全情投入“用户至上”的理念。移动互联网的普及直接导致了手机成为许多人日常生活的一部分，...
在信息时代，高校图书馆的角色正逐渐从传统的文献储存和借阅中心转变为信息服务中心。微信平台作为一款强大的社交媒体工具，已深入人们的生活，为图书馆提供了新的服务模式。本文以“试论信息时代高校图书馆微信平台...
这些效果分别实现了从上至下、从左至右、从右至左、从下至上擦除对象的动画效果，常用于页面切换或元素替换的过渡。 ##### 14. Zoom `<mx:Zoom>`实现对象缩放的动画效果，常用于图片浏览或地图缩放等功能中。 ####...
为了实现平滑过渡，可以再创建一个动画将图片从下至上滑入屏幕，同时可以配合渐入渐出的效果，以增加视觉吸引力。 总结来说，实现知乎日报开屏页效果主要涉及到Android的属性动画和自定义View的使用。通过属性动画...
从那时起，公司始终坚持创新驱动和客户至上的原则，致力于为不同行业提供高效率、高精度的自动化解决方案。西克公司的业务遍及全球，在美洲、欧洲、亚洲等多个地区设有分支机构，并在世界各地建立了多个研发中心。这...
法律声明方面，报告由亿邦动力研究院和京喜联合制作和发布，报告中的所有文字、图片、表格都受到中国知识产权法律法规的保护，任何组织和个人未经书面许可，不得使用报告中的信息用于商业目的。报告中的数据采用问卷...