如果做vr参观网站,网页设计是学什么的,nginx wordpress建站,网站运营编辑做什么的无意中看到如何实现一张图片从下往上慢慢显现出来这个问题#xff0c;弄了半天还是从上往下的效果#xff0c;纠结了#xff0c;最后还是提问人自己搞定了#xff01;不过哈哈#xff0c;又学到一点知识#xff01; 1.下面是我自己做的效果(按钮可以点哦) 图片由下至上逐… 无意中看到如何实现一张图片从下往上慢慢显现出来这个问题弄了半天还是从上往下的效果纠结了最后还是提问人自己搞定了不过哈哈又学到一点知识 1.下面是我自己做的效果(按钮可以点哦) 图片由下至上逐渐显示 2.代码如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
headtitle图片由下至上逐渐显示/titlescript typetext/javascript srchttp://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js/scriptstyle typetext/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 idcontent
!--跑马灯效果--
div
!--width 宽 height高 bgcolor背景颜色 direction滚动方向
behavior行为滚动方式:值有scroll表示由一端滚动到另一端会重复。slide表示由一端滚动到另一端不会重复。alternate表示在两端之间来回滚动
scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数
οnmοuseοverthis.stop() οnmοuseοutthis.start()鼠标经过的时候停止离开的时候继续滚动--
marquee behavioralternate scrollamount3 scrolldelay1 direction Left width300 onmouseoverthis.stop() onmouseoutthis.start()
图片由下至上逐渐显示
/marquee
/div
!--图片显示--
div classdiv_pic
img idpic srchttp://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg alt /
/div
!--按钮--
div classdiv_display
input iddisplay_pic typebutton value显示 /
input idnodisplay_pic typebutton value取消 /
/div
/div
script typetext/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如需转载请自行联系原作者
