`
snake_hand
  • 浏览: 576073 次
社区版块
存档分类
最新评论

图片由下至上逐渐显示

 
阅读更多

无意中看到如何实现一张图片从下往上慢慢显现出来这个问题，弄了半天还是从上往下的效果，纠结了，最后还是提问人自己搞定了！不过哈哈，又学到一点知识！

1.下面是我自己做的效果(按钮可以点哦)

 

<!--跑马灯效果-->
<!--width 宽 height高 bgcolor背景颜色 direction滚动方向 behavior行为（滚动方式）:值有scroll（表示由一端滚动到另一端，会重复。）slide（表示由一端滚动到另一端，不会重复。）alternate（表示在两端之间来回滚动） scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数 onmouseover="this.stop()" onmouseout="this.start()"鼠标经过的时候停止，离开的时候继续滚动--> 图片由下至上逐渐显示

<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>

 

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>标签，跑马灯的效果就没有了，需要的朋友可以复制代码自己在浏览器上看看效果  #^_^#

 

0
顶
0
踩
分享到：
| 虾米音乐绝对地址的获取
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics