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

最新推荐文章于 2023-12-12 20:09:44 发布

成年人的苦衷

最新推荐文章于 2023-12-12 20:09:44 发布

阅读量4.9k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_43996168/article/details/122618388

版权

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

web

3 篇文章

订阅专栏

一、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,否则减少1px
		       this.x = this.x + (this.statusX ? -1 : 1)                                  
		       //如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
		       if (this.x < 0) { this.statusX = 0 }                                       
		       //如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
		       if (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>