vue.js寫懸浮廣告效果

拿上一篇運行一下，感覺自己這個效果在邊界處理的更好 

 

<template>
   <div class="ad">
       <p>vue廣告懸浮</p>
       <img src="../assets/u=2610250996,3671218916&fm=26&gp=0.jpg" id="img" alt="">
       <button @click="params()">run</button>
   </div>
</template>
<script>
export default {
    methods:{
        params(){
            let count = 11          //速度
            // let count = 500         //速度
            let stepX = 1
            let stepY = 1
            let img = document.getElementById('img')
            let imgWidth = img.offsetWidth
            let imgHeight = img.offsetHeight
            let clientw = document.body.clientWidth; //1903（不包含滾動條）
            let clienth = document.body.clientHeight; //866（不包含工具條）
            let x = parseInt(img.getBoundingClientRect().left)
            let y = parseInt(img.getBoundingClientRect().top)
            setInterval(()=>{
                let distenceX = clientw-x
                let distenceY = clienth-y
                if(distenceX-imgWidth<0||distenceX>clientw){
                    stepX = -stepX
                }
                if(distenceY-imgHeight<0||distenceY>clienth){
                    stepY = -stepY
                }
                x+=stepX
                y+=stepY
                this.changePos(img,x,y)
            },count)
        },
        changePos(img,x,y){
            img.style.left = x+'px'
            img.style.top = y+'px'
        }
    }
}
</script>

<style lang="stylus" scoped>
img 
   position absolute
   left 0px
   top 50px
   width 45px
   height 45px
</style>

 后續發現居然在碼農教程被發表了，哈哈

放個鏈接