JavaScript/jQuery/Vue实现飘窗功能

最新推荐文章于 2024-08-21 11:23:51 发布

李子维啊

最新推荐文章于 2024-08-21 11:23:51 发布

阅读量1.9k

点赞数 5

文章标签：飘窗 js vue jquery

本文链接：https://blog.csdn.net/KONGHUI911/article/details/103472178

版权

本文详细介绍了如何使用JavaScript、jQuery和Vue三种不同的技术实现飘窗功能，包括JavaScript飘窗的基本实现，jQuery飘窗的高效操作，以及Vue飘窗的组件化方法。

摘要由CSDN通过智能技术生成

JavaScript/jQuery/Vue实现飘窗功能

JavaScript飘窗
jQuery飘窗
Vue飘窗

JavaScript飘窗

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        #adbox{
   
            width:150px;
            height:150px;
            position: absolute;
            z-index:999;
        }
        #adbox img{
   
            border: none;
        }
        #adbox b{
   
            position: absolute;
            right: 5px;
            top: 0;
            cursor: pointer;
            color:#666;
        }
    </style>
</head>
<body>
    <div id="adbox">
        <a href="javascript:;">
            <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片">
        </a>
        <b onclick="closebox()">×</b>
    </div>
    <script>
        var x = 50,y = 60
        var xin = true, yin = true
        var step = 1
        var delay = 10
        var obj=document.getElementById("adbox")

        function movebox() {
   
            var L=T=0
            var R= document.documentElement.clientWidth-obj.offsetWidth
            var B = document.documentElement.clientHeight-obj.offsetHeight
            obj.style.left = x + document.documentElement.scrollLeft + "px"
            obj.style.top = y + document.documentElement.scrollTop + "px"
            x = x + step*(xin?1:-1)
            if (x < L) {
    xin = true; x = L}
            if (x > R){
    xin = false; x = R}
            y = y + step*(yin?1:-1)
            if (y < T) {
    yin = true; y = T }
            if (y > B) {
    yin = false; y = B }
        }

        var itl= setInterval('movebox()', delay)
        obj.onmouseover=function(){
   clearInterval(itl)}
        obj.onmouseout=function(){
   itl=setInterval('movebox()', delay)}
        function closebox() {<