【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,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

两个数之和等于第三个数

这是一个很好的算法题&#xff0c;解法类似于快速排序的整理方法。同时&#xff0c;更为值得注意的是这道题是 人人网2014校园招聘的笔试题&#xff0c;下面首先对题目进行描述&#xff1a; 给出一个有序数组&#xff0c;另外给出第三个数&#xff0c;问是否能在数组中找到两个…

html标题前色块,CSS轻松实现色块标题标识

不少网站开始采用韩式风格来建站&#xff0c;这种风格的特点是色彩变化丰富、应用Flash动画合理、结构新颖&#xff0c;最明显的特点就是表格或标题栏常会加上一条横或竖的色带&#xff0c;如图1中圈起来的地方就是这样。(图一)一般人都会想到用Photoshop等软件来完成这样的效果…

101与金根回顾敏捷个人:(13)敏捷个人和敏捷开发

本文更新版本已挪至 http://www.zhoujingen.cn/blog/1726.html ------------------------- 敏捷个人源于工作 自2001初成立了敏捷联盟到现在10年的推广&#xff0c;敏捷开发已日渐成为当前IT行业软件开发的一种主流方法。没有银弹&#xff0c;任何方法都不可能解决所有问题&a…

Exchange server 2010系列教程之三 发送邮件测试

最近有些忙&#xff0c;好几天没有上来写教程了&#xff0c;接着往下写吧。就当是自己的学习笔记&#xff0c;呵呵&#xff0c;有不到之处&#xff0c;还请大家多多指教。 上一篇我们已经把服务器架设好了&#xff0c;那么我们来测试一下发送邮件。 1.首先在AD DC上面新建一个域…

华科的计算机和建筑学哪个强,华中科技大学和华南理工大学相比,谁更占优势?看了也许就知道了...

大学是学生接受教育的过程中非常重要的一个阶段&#xff0c;很多学生都会尽可能在高考中&#xff0c;考出更好的成绩&#xff0c;争取报考一个更好的大学。为了提升教育水平&#xff0c;我国到目前为止建设了超过3000所大学&#xff0c;其中有很多高等院校非常相似&#xff0c;…

uic计算机课程表,美国UIC大学研究生毕业率能达到多少?申请条件、专业课程汇总...

UIC大学也就是伊利诺伊大学芝加哥分校&#xff0c;这所学校始建于1982年&#xff0c;该校拥有东、西两个校区&#xff0c;皆位于美国第二大商业中心芝加哥市的心脏地带&#xff0c;地理位置优势显著&#xff0c;UIC大学有着丰富的教学资源和出色的教学水准&#xff0c;那么接下…

Tegra3 vSMP架构Android运行时CPU热插拔及高低功耗CPU切换

Tegra3采用vSMP&#xff08;VariableSymmetric Multiprocessing&#xff09;架构&#xff0c;共5个cortex-a9处理器&#xff0c;其中4个为高性能设计&#xff0c;1个为低功耗设计&#xff1a; 在系统运行过程中&#xff0c;会根据CPU负载切换低功耗处理器和高功耗处理器&#x…

近5年133个Java面试问题列表

2019独角兽企业重金招聘Python工程师标准>>> Java 面试随着时间的改变而改变。在过去的日子里&#xff0c;当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试&#xff0c;但是现在问题变得越来越高级&#xff0c;面试官问的问题也更深入。 在我初…

PowerShell与活动目录

自从发布以来&#xff0c;Windows PowerShell已经成为Windows自动化平台的选择。它的强大和灵活已经在许多环境中被许多Windows技术所证明。不幸的是&#xff0c;在活动目录支持方面&#xff0c;PowerShell 1并没有什么可以炫耀。从基础角度&#xff0c;微软提供了ADSI“类型加…

MyBatis-Plus入门Demo详解

一.简介: 引用官方文档(本文主要参考官方文档示例): MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 愿景 我们的愿景是成为 MyBatis 最好的搭档&#xff0c;就…

RHEL 5基础篇—常见系统启动类故障

常见系统启动类故障 在linux系统的启动过程中&#xff0c;涉及到MBR主引导记录、GRUB启动菜单、系统初始化配置文件inittab等各方面&#xff0c;其中任何一个环节出现故障都有可能会导致系统启动失败。因此一定要注意做好相关文件的备份工作。 1、MBR扇区故障 MBR引导记录位…

PVS 6.1 Configuring Services Failed

好久没有更新了&#xff0c;嘿嘿&#xff0c;更新一个。 项目中遇到一个问题&#xff0c;PVS安装到最后一步报错&#xff0c;如下图&#xff1a; 环境&#xff1a;PVS 6.1&#xff0c;数据库是SQL Server 2005 SP4 查了一下文档&#xff0c;PVS 6.1支持SQL Server 2005 SP4 排查…

jsp论坛网站模版_网站关键词优化怎么做

说到网站关键词优化&#xff0c;大多企业都很陌生&#xff0c;建站公司说的关键词优化头头是道。跟听天书似的&#xff0c;51商务网小编为大家总结的网站优化方法希望可以帮到大家&#xff0c;首先要说的是做网站优化第一点就是要有耐心&#xff0c;如果很长时间没有收录的话&a…

go 列出已经安装的包_Go 安装教程

一、在 Windows 上安装 Go 环境首先在 Go 官网 下载 Windows 系统下的一键安装包。然后双击打开该文件&#xff0c;一直点 Next 就行。注意这里默认是安装到 C 盘&#xff0c;建议不要修改&#xff0c;因为环境变量会自动设置&#xff0c;如果安装到其他盘&#xff0c;那么可能…

【转】spin_lock、spin_lock_irq、spin_lock_irqsave区别

为什么80%的码农都做不了架构师&#xff1f;>>> 转自&#xff1a;http://blog.csdn.net/luckywang1103/article/details/42083613 void spin_lock(spinlock_t *lock);void spin_lock_irq(spinlock_t *lock);void spin_lock_irqsave(spinlock_t *lock, unsigned lon…

七年级计算机上教学计划,初一教学计划模板锦集5篇

初一教学计划模板锦集5篇时光在流逝&#xff0c;从不停歇&#xff0c;我们又将迎来新的教学工作&#xff0c;我们要好好计划今后的教育教学方法。那么一份同事都拍手称赞的教学计划是什么样的呢&#xff1f;以下是小编为大家整理的初一教学计划5篇&#xff0c;仅供参考&#xf…

我的世界服务器玩家在线时间,将公布上线时间?我的世界中国版网易520前瞻

【17173专稿&#xff0c;转载请注明出处】《我的世界》中国版最近一段时间动作不断。网易CEO丁磊在财报电话会议上公布了《我的世界》手游版会在7月份推出&#xff0c;结合《我的世界》中国版的公告提及&#xff1a;”《我的世界》中国版即将在暑期上线“。如此看来手游版和PC版…

ftpwebrequest 无法加载或初始化请求的服务提供程序_jvm之类加载机制

什么是类加载每个编写的".java"拓展名类文件都存储着需要执行的程序逻辑&#xff0c;这些".java"文件经过Java编译器编译成拓展名为".class"的文件&#xff0c;".class"文件中保存着Java代码经转换后的虚拟机指令&#xff0c;当需要使…

云服务器怎么设置域名,云服务器域名设置在哪里

可能不同的云服务厂商域名设置的方式略有不同&#xff0c;不过&#xff0c;大体来讲&#xff0c;方法应该都差不多的。下面我们以1.打开浏览器&#xff0c;搜索西部数码官网并登陆账号密码&#xff0c;到会员中心。2.进入管理中心后&#xff0c;在左侧的业务管理中找到3.点击服…

RHCE 学习笔记(9) 网络管理

n这一节本来按照教学大纲应该是学习SSH&#xff0c;不过SSH有很多网络相关的知识&#xff0c;因此老师把网络内容提前了一些。网络的基本知识例如IP&#xff0c;DNS&#xff0c;DHCP&#xff0c;路由协议等常识就不在此解释了。 RHEL查看网卡的相关信息很容易&#xff0c;ifcon…