html 飘浮移动广告层,JS全屏漂浮广告、移入光标停止移动

本节内容:

JS全屏漂浮广告

例子:

复制代码 代码示例:

JS全屏漂浮广告-www.jquerycn.cn

div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}

JS全屏漂浮广告,移入光标停止移动

全屏漂浮广告的内容部分,jquery中文网倾情提供!!!
jquerycn.cn

/**

* JS全屏漂浮广告代码

* by www.jquerycn.cn

*/

var ggRoll = {

roll: document.getElementById("roll"),

speed: 20,

statusX: 1,

statusY: 1,

x: 100,

y: 300,

winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,

winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,

Go: function () {

thisthis.roll.style.left = this.x + 'px';

thisthis.roll.style.top = this.y + 'px';

thisthis.x = this.x + (this.statusX ? -1 : 1)

if (this.x < 0) { this.statusX = 0 }

if (this.x > this.winW) { this.statusX = 1 }

thisthis.y = this.y + (this.statusY ? -1 : 1)

if (this.y < 0) { this.statusY = 0 }

if (this.y > this.winH) { this.statusY = 1 }

}

}

var interval = setInterval("ggRoll.Go()", ggRoll.speed);

ggRoll.roll.onmouseover = function () { clearInterval(interval) };

ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要实现一个飘浮在界面上且不占据宽度的滚动条,可以使用一些技巧。以下是一种常用的方法: 首先,你可以创建一个固定定位的容器,用于包裹你的内容和滚动条。设置这个容器为固定定位可以让它飘浮在界面上。 ```html <div class="scroll-container"> <!-- 内容 --> </div> ``` 接下来,在CSS中设置这个容器的样式,包括固定定位、宽度和高度等。 ```css .scroll-container { position: fixed; /* 固定定位 */ top: 0; right: 0; width: 10px; /* 设置宽度 */ height: 100vh; /* 设置高度 */ } ``` 然后,你可以在这个容器内部创建一个滚动条元素。这个滚动条元素可以是一个`div`或者其他适合的元素。 ```html <div class="scrollbar"></div> ``` 在CSS中,设置这个滚动条元素的样式,包括背景颜色、宽度、高度等。 ```css .scrollbar { background-color: #888; /* 设置滚动条颜色 */ width: 100%; /* 设置滚动条宽度 */ height: 100%; /* 设置滚动条高度 */ } ``` 最后,你可以使用JavaScript来监听内容区域的滚动事件,并通过改变滚动条元素的高度来模拟滚动效果。 ```javascript const scrollContainer = document.querySelector('.scroll-container'); const scrollbar = document.querySelector('.scrollbar'); scrollContainer.addEventListener('scroll', () => { const scrollPercentage = (scrollContainer.scrollTop / (scrollContainer.scrollHeight - scrollContainer.clientHeight)) * 100; const scrollbarHeight = (scrollContainer.clientHeight / scrollContainer.scrollHeight) * 100; scrollbar.style.height = `${scrollbarHeight}%`; scrollbar.style.top = `${scrollPercentage}%`; }); ``` 这样,你就可以实现一个飘浮在界面上且不占据宽度的滚动条了。希望对你有所帮助!如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值