无意中看到如何实现一张图片从下往上慢慢显现出来这个问题,弄了半天还是从上往下的效果,纠结了,最后还是提问人自己搞定了!不过哈哈,又学到一点知识!
1.下面是我自己做的效果(按钮可以点哦)
图片由下至上逐渐显示
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循环次数 οnmοuseοver="this.stop()" οnmοuseοut="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="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.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>标签,跑马灯的效果就没有了,需要的朋友可以复制代码自己在浏览器上看看效果 #^_^#
本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/archive/2013/04/28/3049217.html,如需转载请自行联系原作者