JavaScript浮动特效实现动态翻转效果

需积分: 14 190 浏览量更新于2024-09-12 收藏 1KB TXT 举报

"本资源主要介绍的是如何利用JavaScript实现一个动态的浮动特效。在HTML文档中，首先定义了一个名为'show'的元素，它是一个具有白色背景、180x180像素的容器，设置为相对定位，并且设置了overflow为hidden，以隐藏超出内容。接着，有一个绝对定位的标题元素'h2'，初始时位于底部，半透明黑色背景，显示文字并设置高度为50像素。 JavaScript部分的核心是通过`go()`函数启动特效。这个函数中，首先获取到'id'为'show'的元素以及其内部的'h2'标题元素。然后，当标题元素的bottom值小于0（即已经离开可视区域）时，每0.1秒增加一个固定的负值，使其逐渐向上移动；当标题元素底部位置超过-50像素（即将完全回到可视区域）时，停止定时器，停止动画效果。这样就实现了一个循环往复的浮动效果，使得标题元素像是在上下移动，增加了视觉吸引力。通过这个实例，我们可以学习到如何运用CSS和JavaScript结合，创建基本的网页交互效果，特别是对元素位置进行动态调整的技术。这对于理解和掌握前端页面交互设计、动画效果的实现有着实际的应用价值。同时，也展示了JavaScript控制DOM元素样式变化的能力，这对于前端开发者来说是一项重要的技能。"

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;font-size:12px}
ul,ol{list-style-type:none}
#show{background:white;height:180px;width:180px;position:relative;overflow:hidden;text-align:center}
#show h2{position:absolute;height:50px;text-align:center;line-height:50px;width:100%;opacity:0.5;background:black;color:white;left:0;bottom:0}
</style>
<script>
function go(){
var t,tt;
var _div=document.getElementById("show");
var obj=_div.getElementsByTagName('h2')[0];
obj.style.bottom="-50px";
var change=function(){
var obj_h=parseInt(obj.style.bottom);
if(obj_h<0){obj.style.bottom=(obj_h+Math.floor((0-obj_h)*0.1))+"px"}//if
else{clearInterval(t)}
}
var back=function(){
var obj_hh=parseInt(obj.style.bottom);
if(obj_hh>-50){obj.style.bottom=(obj_hh+Math.floor((-50-obj_hh)*0.1))+"px"}
else{clearInterval(tt)}
}
_div.onmouseover=function(){clearInterval(tt);t=setInterval(change,10);}
_div.onmouseout=function(){clearInterval(t);tt=setInterval(back,10)}

下载后可阅读完整内容，剩余1页未读，立即下载

apricotISmihoutao

粉丝: 0
资源: 2

JavaScript浮动特效实现动态翻转效果

js特效--图片浮动

js浮动弹出框特效jquery

js 特效 html 特效 连接说明浮动条脚本

❉ html+css+javascript制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备​

canvas 3d特效

JS特效——广告图由左往右滚动

在使用HTML5、CSS3和JavaScript开发企业官网时，如何设计一个兼容主流浏览器的响应式布局，并实现动态轮播特效？

在创建企业官网时，如何结合HTML5、CSS3和JavaScript实现一个兼顾兼容性和动态轮播特效的响应式布局？

html+css+js网页设计

最新资源

js 特效 html 特效连接说明浮动条脚本

❉ html+css+javascript制作爱心表白代码(卡通人物爱心表白-爱心形状浮动特效 )备