一、jsp飘窗

效果图

小浮窗在页面上移动，点叉号关闭飘窗。

上代码（飘窗主要实现代码）

引入了jquery来关闭飘窗，可以改成原生js实现

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Author" content=""><meta name="Keywords" content="酒店管理系统"><meta name="Description" content="酒店管理系统">
<title>酒店管理系统首页</title>
</head>
<body>
<!--飘窗-->
<div id="roll" style="width: 200px;position: fixed;cursor:pointer;"><img src="../resources/home/images/235320-1573142000cf9f.jpg"border="0"alt='酒店介绍'width="200px"onclick="javascript:window.open('${pageContext.request.contextPath}/home/detail');"style="cursor:pointer;"/><b id="close" style="width:15px; line-height:15px; position:absolute; right:0;top:0; background:rgba(0,0,0,.5); cursor:pointer; font-size:18px;color:#fff;text-align:center;">×</b>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
//关闭飘窗点击方法$("#close").click(function(){$("#img").hide();});var ggRoll={                                     //创建对象直接量roll:document.getElementById("roll"),          //获取id属性为roll的对象speed:20,                                      //飘动速度，即为定时器函数多长时间执行一次statusX:1,                                     //规定每执行一次函数，left属性值变化的幅度statusY:1,                                     //规定每执行一次函数，top属性值变化的幅度x:100,                                         //规定初始状态下left属性的值y:300,                                         //规定初始状态下top属性的值//差值用来测算left属性值的极限winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth, //差值用来测算top属性值的极限winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight, //声明函数Go: function () {                                                               //设置div的left属性值this.roll.style.left = this.x + 'px';                                      //设置div的top属性值this.roll.style.top = this.y + 'px';                                       //如果statusX=1则每次减少1px,否则减少1pxthis.x = this.x + (this.statusX ? -1 : 1)                                  //如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0if (this.x < 0) { this.statusX = 0 }                                       //如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1if (this.x > this.winW) { this.statusX = 1 }                               this.y = this.y + (this.statusY ? -1 : 1)if (this.y < 50) { this.statusY = 0 }if (this.y > this.winH) { this.statusY = 1 }}};var interval=setInterval("ggRoll.Go()",ggRoll.speed);ggRoll.roll.onmouseover=function(){clearInterval(interval)};                     //onmouseover属性：鼠标移动到元素上时触发ggRoll.roll.onmouseout=function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout属性:鼠标离开元素时触发
</script>
</body>

二、html飘窗浮窗

效果图

小浮窗在页面上移动，点叉号关闭飘窗。

上代码（飘窗主要实现代码）

<html>
<head><title>html－WEB开发</title>
</head>
<body>
<section><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222223</p><p>12222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><p>12222222222222222222222223</p><div id="img" style="position:absolute;z-index=99;"onmouseover="pause_resume();"onmouseout="pause_resume();"><img src="https://iknow-pic.cdn.bcebos.com/a2cc7cd98d1001e9adf6f49eaa0e7bec55e7975d"border="0"alt='酒店介绍'width="200px"onclick="javascript:window.open(this.src);"style="cursor:pointer;"/><b id="close" style="width:15px; line-height:15px; position:absolute; right:0;top:0; background:rgba(0,0,0,.5); cursor:pointer; font-size:18px;color:#fff;text-align:center;">×</b></div>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">$("#close").click(function(){$("#img").hide();});var xPos = document.body.clientWidth-20;var yPos = document.body.clientHeight/2;var step = 1;var delay = 20;var height = 0;var Hoffset = 0;var Woffset = 0;var yon = 0;var xon = 0;var pause = true;var interval;img.style.top = yPos;function changePos() {width = document.body.clientWidth;height = document.body.clientHeight;Hoffset = img.offsetHeight;Woffset = img.offsetWidth;img.style.left = xPos + document.body.scrollLeft;img.style.top = yPos + document.body.scrollTop;if (yon) {yPos = yPos + step;}else {yPos = yPos - step;}if (yPos < 0) {yon = 1;yPos = 0;}if (yPos >= (height - Hoffset)) {yon = 0;yPos = (height - Hoffset);}if (xon) {xPos = xPos + step;}else {xPos = xPos - step;}if (xPos < 0) {xon = 1;xPos = 0;}if (xPos >= (width - Woffset)) {xon = 0;xPos = (width - Woffset);}}function start() {img.visibility = "visible";interval = setInterval('changePos()', delay);}function pause_resume() {if(pause) {clearInterval(interval);pause = false;}else {interval = setInterval('changePos()',delay);pause = true;}}start();
</script>
</body>
</html>

网页飘窗效果，jsp页面飘窗浮窗，html飘窗浮窗，点叉号关闭飘窗相关推荐

将jsp页面转化为图片或pdf（一）（qq:2798641729）
在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...
html飘窗效果,js实现网页飘窗效果-Javascript-舒彬琪博客|前端技术博客|CMS教程|PbootCMS|JizhiCMS-www.cnsbq.com...
此飘窗效果不会受页面高度影响,页面多高就移动多大范围可设置的参数有图片地址跳转页面地址跳转页面打开方式漂浮速度共四项主要JS代码如下所示(function($){ $.fn.floatA ...
vue飘窗效果（css飘窗效果，跟随页面滚动）
简述:飘窗效果,相信大家都见过,一般用于官网页面,下面给大家整理了下,飘窗效果在vue中的使用,效果图如下: 1.话不多说,直接上代码,HTML部分: <template><!-- ...
html左右飘窗高度不一致,飘窗离地面多高合适 40厘米高度飘窗效果
飘窗作为一种向外延伸的扩展性窗户,时尚.美观,已经受到很多家庭的欢迎,而且飘窗距离地面的高度不同,展示出来的效果也不同.很多人家装的时候想要设计飘窗,都不知道该设计多高,接下来我们就来说一下飘窗离地面 ...
eclipse在网页进入时显示重定向过多_使用eclipse快速开发jsp以及编码问题、jsp页面元素、request对象学习的粗略记录...
人老了真是什么都会忘记啊orz,早上发现学过去的东西好多都还没记录复盘... ...(懒虫作祟) 在开始之前,俺认为还是很有必要了解一下jsp的执行流程,俺发现CSDN上的"陈小哥cw&qu ...
Android打开jsp页面,如何确定是通过jsp页面上的Android设备还是IOS设备访问网页
路上的小 01-15 2878 加载和访问JSP时,将判断是手机Web端还是PC端 $(document).ready(function(){//平台,设备和操作系统var system = {win ...
php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
Java只读服务器,在服务器端，JSP页面如何只读打开本地的word文件并显示在网页上...
在服务器端,JSP页面怎么只读打开本地的word文件并显示在网页上? 最近开发网站,遇到一个问题就是在服务器端,JSP页面怎么只读打开本地的word文件并显示在网页上,请问高位高手有没有什么解决办法, ...
设计一个jsp页面，要求在网页上显示当前日期和时间，如果时间在6:00~12:00,输出“上午好”:如果时间在12:00 18:00, 输出“下午好”:
设计一个jsp页面,要求在网页上显示当前日期和时间,如果时间在6:00~12:00,输出"上午好":如果时间在12:00 18:00, 输出"下午好":如果时间 ...
vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...

网页飘窗效果，jsp页面飘窗浮窗，html飘窗浮窗，点叉号关闭飘窗

一、jsp飘窗

效果图

上代码（飘窗主要实现代码）

二、html飘窗浮窗

效果图

上代码（飘窗主要实现代码）

网页飘窗效果，jsp页面飘窗浮窗，html飘窗浮窗，点叉号关闭飘窗相关推荐

最新文章

热门文章