JavaScript/jQuery/Vue实现飘窗功能

最新推荐文章于 2024-04-03 09:01:13 发布

VIP文章李子维啊

最新推荐文章于 2024-04-03 09:01:13 发布

阅读量1.9k

点赞数 5

文章标签：飘窗 js vue jquery

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

版权

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)

最低0.47元/天解锁文章

李子维啊

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
JavaScript/jQuery/Vue实现飘窗功能

JavaScript/jQuery/Vue实现飘窗功能JavaScript飘窗jQuery飘窗Vue飘窗JavaScript飘窗<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <s...
复制链接

扫一扫