JS 实现网站动态广告
2019-04-25 本文已影响0人
Rinaloving
QQ截图20190425155733.png
QQ截图20190425155749.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-container">
</div>
<!-- 你的HTML代码 -->
<div id="divImg" style="position:absolute;">
<img src="img/1.JPG" style="width: 200px;height: 200px;">
</div>
<script src="layui/layui.js"></script>
<script src="jquery/jquery-3.1.0.min.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
//layer.msg('Hello World');
});
</script>
<script>
window.onload=function(){
var div=document.getElementById("divImg");
var speedx=6;
var speedy=8;
var t=null;
clearInterval(t);
t=setInterval(function(){
var l=div.offsetLeft+speedx;
var t=div.offsetTop+speedy;
if(l>=document.documentElement.clientWidth-div.offsetWidth){
speedx*=-1;
l=document.documentElement.clientWidth-div.offsetWidth;
}else if(l<=0){
speedx*=-1;
l=0;
}
if(t>=document.documentElement.clientHeight-div.offsetHeight){
speedy*=-1;
t=document.documentElement.clientHeight-div.offsetHeight;
}else if(t<=0){
speedy*=-1;
t=0;
}
div.style.left=l+"px";
div.style.top=t+"px";
},600);
<!--鼠标触碰时停止-->
div.addEventListener("mouseover",function(){
clearInterval(t);
});
<!--鼠标离开时时继续-->
div.addEventListener("mouseout",function(){
t=setInterval(function(){
var l=div.offsetLeft+speedx;
var t=div.offsetTop+speedy;
if(l>=document.documentElement.clientWidth-div.offsetWidth){
speedx*=-1;
l=document.documentElement.clientWidth-div.offsetWidth;
}else if(l<=0){
speedx*=-1;
l=0;
}
if(t>=document.documentElement.clientHeight-div.offsetHeight){
speedy*=-1;
t=document.documentElement.clientHeight-div.offsetHeight;
}else if(t<=0){
speedy*=-1;
t=0;
}
div.style.left=l+"px";
div.style.top=t+"px";
},600);
})
}
</script>
</body>
</html>
