网站首页飘窗效果

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

薇光网站建设

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

阅读量1.8k

点赞数

分类专栏： Javascript 实例文章标签： javascript jquery html5 css3

本文链接：https://blog.youkuaiyun.com/qq_17475727/article/details/108883359

版权

本文详细介绍了如何利用JavaScript、jQuery、HTML5和CSS3技术，创建一个吸引人的首页飘窗效果。通过结合现代浏览器支持的CSS3动画与JavaScript事件处理，实现了窗口平滑移动、透明度变化等多种动态效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>飘窗</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
	<style>
		*{box-sizing:border-box;}
		#roll{width: 180px;height: 150px;background: #f60;}
		.piao{
			position: absolute;
			width: auto;
			height: auto;
			z-index: 9999;
		}
    </style>

</head>
<body>

<!-- 飘窗 -->
<div id="roll" class="piao">飘窗</div>

<script>
 // 飘窗js

  $(function() {
    $( document ).tooltip();
  });
  
  var ggRoll = {  
		    roll : document.getElementById("roll"),  
		    speed : 20,  
		    statusX : 1,  
		    statusY : 1,  
		    x : 100,  
		    y : 300,  
		    winW : document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,  
		    winH : document.documentElement.clientHeight - document.getElementByI

最低0.47元/天解锁文章