js实现网页飘窗

最新推荐文章于 2024-01-18 17:04:29 发布

离恢

最新推荐文章于 2024-01-18 17:04:29 发布

阅读量5.7k

点赞数 2

分类专栏： javascript js html 文章标签： javascript html js

本文链接：https://blog.csdn.net/weixin_46352236/article/details/111058023

版权

前言

js写的网页飘窗,让元素一直在屏幕来回飘动,鼠标经过的时候停止运动.思路
通过fixed定位设置元素位置,然后通过 (元素宽高) 与 (left/top值) 与 (移动像素) 这三个的和相加得到的结果和屏幕宽高相比较,这样来判断移动方向.最后用onmouseover和onmouseout来实现鼠标经过的时候停止动画,鼠标离开继续动画

先上代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js飘窗</title>
		<style type="text/css">
			*{
   margin: 0;padding: 0;}
			html,body{
   width: 100%;height: 100%;}
			#float{width: 80px;height: 80px;position: fixed;top: 100px;background-color: #000;}
		</style>
	</head>
	<body>
		<div id="float"></div>
		
		<script type="text/javascript">
			var div = document.getElementById("float");//获取对象
			var myt = 100,myl = 0;										//定义初始top/left值
			var step = 2;															//要移动多少像素
			var w = div.offsetWidth, h = div.offsetHeight;//获取元素的宽高
			var bw = document.

最低0.47元/天解锁文章

离恢

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js实现网页飘窗

前言js写的网页飘窗,让元素一直在屏幕来回飘动,鼠标经过的时候停止运动.思路通过fixed定位设置元素位置,然后通过 (元素宽高) 与 (left/top值) 与 (移动像素) 这三个的和相加得到的结果和屏幕宽高相比较,这样来判断移动方向.最后用onmouseover和onmouseout来实现鼠标经过的时候停止动画,鼠标离开继续动画先上代码代码如下（示例）：<!DOCTYPE html><html> <head> <meta charset=.
复制链接

扫一扫