图片由下至上逐渐显示

2024-01-14 17:48

本文主要是介绍图片由下至上逐渐显示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

 

<!--跑马灯效果-->
<!--width 宽 height高 bgcolor背景颜色 direction滚动方向 behavior行为(滚动方式):值有scroll(表示由一端滚动到另一端,会重复。)slide(表示由一端滚动到另一端,不会重复。)alternate(表示在两端之间来回滚动) scrollamount单位时间内移动多少像素 scrolldelay延迟的时间停顿 loop循环次数 οnmοuseοver="this.stop()" οnmοuseοut="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循环次数
ο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="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>标签,跑马灯的效果就没有了,需要的朋友可以复制代码自己在浏览器上看看效果  #^_^#

 

这篇关于图片由下至上逐渐显示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/605995

相关文章

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局,其中 label 控件位于 image 控件下方,你可以使用 lv_obj_set_flex_flow 来设置布局为垂直,并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例: 创建父容器:首先创建一个容器对象,该对象将作为布局的基础。设置容器为垂直布局:使用 lv_obj_set_flex_flow 设置容器

C# dateTimePicker 显示年月日,时分秒

dateTimePicker默认只显示日期,如果需要显示年月日,时分秒,只需要以下两步: 1.dateTimePicker1.Format = DateTimePickerFormat.Time 2.dateTimePicker1.CustomFormat = yyyy-MM-dd HH:mm:ss Tips:  a. dateTimePicker1.ShowUpDown = t

研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

安全研究人员Marcus Murray在正在旧金山举行的RSA大会上公布了一种利用恶意JPEG图片入侵企业网络内部Windows服务器的新方法。  攻击流程及漏洞分析 最近,安全专家兼渗透测试员Marcus Murray发现了一种利用恶意JPEG图片来攻击Windows服务器的新方法,利用该方法还可以在目标网络中进行特权提升。几天前,在旧金山举行的RSA大会上,该Marcus现场展示了攻击流程,