【jQuery Demo】图片由下至上逐渐显示
生活随笔
收集整理的這篇文章主要介紹了
【jQuery Demo】图片由下至上逐渐显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
無意中看到如何實現一張圖片從下往上慢慢顯現出來這個問題，弄了半天還是從上往下的效果，糾結了，最后還是提問人自己搞定了！不過哈哈，又學到一點知識！
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，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的【jQuery Demo】图片由下至上逐渐显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Exchange Server 2007
- 下一篇： Exchange server 2010