如何给html页面添加动态等待效果

如何给html页面添加动态等待效果,第1张

网友看看是否符合需求,修改起来也很方便,都做了注释;

实在不会的,去查看手册即可

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8" />

<head>

<title></title>

</head>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/layer/3.0.1/layer.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function() {

$('.btn').click(function() {

layer.msg('加载中(点击关闭)', {

anim: 4, //动画效果

icon: 16,

shade: 0.5, //遮罩层透明度

shadeClose: true, //点击遮罩层关闭

time: 0, //不自动关闭

}, function() {

layer.alert('显示加载信息后,你可以执行别的 *** 作,就像这样', {

skin: 'layui-layer-lan',

closeBtn: 0,

anim: 6 //动画类型

})

})

})

})

</script>

<style type="text/css">

html,

body {

margin: 0

padding: 0

}

.demo {}

</style>

<body>

<div class="demo">

<button class="btn">点击显示效果</button>

</div>

</body>

</html>

用PS做的是效果图,需要前端开发人员编写代码才可以在网站上展示出来。

简单来说,在PS里做好之后,需要切图。把图片切割成适合在网站上浏览。

切图时需要把文字分离出图片的要处理好。

切好图片之后,需要用html结合JavaScript等知识编写代码。

这样写出的页面还只是静态的网站。

如果想要做成动态的效果,还需要搭建后台,连接数据库等。

<DIV id=marquees><A href="javascript:">1,你可曾有过无数的梦想,</A><BR><BR><A

href="javascript:">2,却在时光的流逝里幻灭 </A><BR><BR><A

href="javascript:">3,你可曾对未来期待憧憬,</A><BR><BR><A

href="javascript:">4,却在成长的岁月中迷失</A><BR><BR></DIV>

<SCRIPT language=JavaScript>

marqueesHeight=200

stopscroll=false

with(marquees){

style.width=0

style.height=marqueesHeight

style.overflowX="visible"

style.overflowY="hidden"

noWrap=true

onmouseover=new Function("stopscroll=true")

onmouseout=new Function("stopscroll=false")

}

document.write('<div id="templayer" style="position:absolutez-index:1visibility:hidden"></div>')

preTop=0currentTop=0

function init(){

templayer.innerHTML=""

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML

setInterval("scrollUp()",20)//越大越慢

}

document.body.onload=init

function scrollUp(){

if(stopscroll==true) return

preTop=marquees.scrollTop

marquees.scrollTop+=1

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight

marquees.scrollTop+=1

}

}

</SCRIPT>这个是文字向上滚动。

<marquee direction="up" behavior="alternate">你好,希望这个是你所需要的效果!!!</marquee>这个是文字上下来回滚动!


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6235354.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存