随滚动条上下滑动的广告效果

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript MYSQL 文章标签： xhtml firefox html function 文档 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wincom528/article/details/5340652
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var lastScrollY = 0;
function show()
{
 var diffY;
 if(document.documentElement && document.documentElement.scrollTop)
  diffY = document.documentElement.scrollTop;
 else if(document.body)
  diffY = document.body.scrollTop;
 
 
 percent = 0.1*(diffY - lastScrollY);     //此处前面的0.1参数是控制滑动的快慢，1为最快，滑动效果几乎没有动；
 if(percent > 0) percent = Math.ceil(percent);
 else percent = Math.floor(percent);
 
 document.getElementById("test").style.top = parseInt(document.getElementById

("test").style.top) + percent + "px";    //此处不加“px”会导致在firefox下无法运行。
 
 document.getElementById("out").innerHTML = diffY +'-----' + percent;
 
 lastScrollY += percent;
}
window.setInterval("show()",1);
</script>
</head>

<body>
<div id="test" style="position:absolute; top:0px; left:0px; background-color:#FF9900;

width:100px; height:100px;">测试漂浮</div>
<div>
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
</div>
<div id="out"></div>
</body>
</html>

wincom528
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现网页中常见的随滚动条移动的悬浮广告栏做法
04-13
这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高然后再除掉2，那么此时再加上可视区到顶部的距离就可以把这个盒子保始终停在页面的中间,但是这里会有一个小问题，那就是因为我们除去2运算了所以会出现小数的情况。这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。
滑动图片展示广告效果
12-01
很酷的html滑动图片展示广告效果
如何实现广告图片总是显示在页面上方，并且随滚动条同步移动？
s2940086379的博客
05-21 6545
思路分析： 把广告图片放在一个div中，并且div总是显示在页面的上方 使用getElementById()方法获取层对象，并且获取层在页面上的初始位置 根据鼠标滚动事件，获取滚动条滚动的距离 随着滚动条的移动改变层在页面上的位置 js代码：function move(){ adverObject.style.top=adverTop+parseInt(document.document
HTML5实现的手机上下滑动翻页特效源码
04-12
这是一款手机移动端触屏滑动翻页代码下载，很好用，现在分享出来，大家好好利用哦。
仿网易自动循环广告，也可手动滑动
08-30
仿网易自动循环广告 也可手动滑动 可自定义自动滚动时间间隔 这个例子是从其他地方下的 不过原始代码里存在严重的内容泄露 使用时间长了 会发现滚动缓慢 这个bug 已被我修复 使用方法如下： NSMutableArray viewsArray [NSMutableArray array]; for int i 0; i < 3; ++i { UIImageView imageView [[UIImageView alloc]initWithFrame:self adViewContainerInPersonalView bounds]; imageView image [UIImage imageNamed:[NSString stringWithFormat:@"MQLADPlaceholderPic%d" i+1]]; [viewsArray addObject:imageView]; } self adView [[CycleADScrollView alloc] initWithFrame:self adViewContainerInPersonalView bounds animationDuration:2]; self adView fetchContentViewAtIndex ^UIView NSInteger pageIndex { return viewsArray[pageIndex]; }; self adView totalPagesCount ^NSInteger void { return [viewsArray count]; }; self adView TapActionBlock ^ NSInteger pageIndex { NSLog @"点击了第%d个" pageIndex ; }; [self adViewContainerInPersonalView addSubview:self adView];">仿网易自动循环广告 也可手动滑动 可自定义自动滚动时间间隔 这个例子是从其他地方下的 不过原始代码里存在严重的内容泄露 使用时间长了 会发现滚动缓慢 这个bug 已被我修复 使用方法如下： NSMutableArray [更多]
Android_RecyclerView实现上下滚动广告条实例（带图片）
08-30
在实现上下滚动广告条时，可能会遇到触摸滑动问题，要解决这个问题，可以给 RecyclerView 加一层透明的蒙板，彻底禁用掉 RecyclerView 的 touch 事件，然后给蒙板设置点击事件。 知识点4: 布局设计 在实现上下滚动...
Android TextSwitche 上下滚动的广告条 小喇叭功能
10-24
在这个场景中，我们可以看到TextSwitcher结合小喇叭功能，可能是指在滚动广告的同时，播放相应的音频提示，提升用户体验。 首先，我们来详细了解一下TextSwitcher的基本概念。TextSwitcher继承自ViewSwitcher，它的...
jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.
09-18
标题中的“jquery右侧浮动广告,随滚动条上下滚动”指的是使用jQuery库实现的一种网页广告设计技术，这种技术可以使广告在页面右侧保持固定位置，并随着用户滚动页面时始终保持可见。这样的设计能够持续吸引用户的...
Android 上下滚动条、轮训滚动、广告条，附带源码及apk
06-22
"Demo.apk"是编译后的应用安装包，可以安装在Android设备上运行，直观地查看滚动条和广告条的效果。而"README.txt"可能包含了项目的说明和使用指南，可以帮助理解代码的实现细节。 总的来说，Android的滚动条和轮训...
图片动画横条广告带上下滚动可自定义图片、链接等等
09-04
标题和描述中提到的是一个网页设计中的互动式广告组件，具体是一种图片动画横条广告，具备上下滚动功能，用户可以根据需求自定义广告的图片、链接、长度和宽度。这种广告条设计增强了用户体验，因为当鼠标光标移动到...
手机滑动效果 页面滑动滚动显示广告
04-08
手机滑动效果 页面滑动滚动显示广告
ASP.NET网页随滚动条滑动的层,ASP.NET页面随滚动条滚动
04-20
ASP.NET网页随滚动条滑动的层,ASP.NET页面随滚动条滚动
缓冲运动(上下跟随侧边栏)
Z19871124123456的博客
02-16 166
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动侧边栏</title> <style> * { margin: 0; ...
在HTML中自动滑动的广告是什么技术,js或css实现滚动广告的几种方案
weixin_39705435的博客
06-03 131
在触发js的scroll事件啊，可是我遇到的是真正不动的，我开始以为是FF上面才会这样，没想到IE6和IE7都有如此效果，不得不惊叹神奇了。如是我就找出了如下神奇的代码：仅用CSS实现滚动效果~~#fixed{position:fixed;}滚动完了，就这个属性就搞定滚动了，真想骂人了。不过还没完呢，这个只支持火狐和IE7，我刚才说过IE6也可以的，只是IE6要实现就有点复杂了，这个我也没太看是什...
HTML+JS制作无限滚动广告代码
qq_41093007的博客
02-12 7348
对于火热的H5,虽然你会用，但是不一定全部会写。这里记录的是html+css实现的广告无限滚动效果。后期还会记录自己学习中遇到的小应用知识！谢谢
第二章-在HTML中使用JavaScript
最新发布
2301_79858637的博客
07-07 1252
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
固定div位置,不随滚动条上下动
05-01
如何固定div位置，不随滚动条上下动呢？首先，我们需要了解一个css属性——position。 1. position属性 这个属性是用来设置元素的定位方式，它可以设置为static、relative、absolute、fixed、sticky五种值。在这里我们只关注fixed值，因为这个值能够实现我们要达到的效果。 2. fixed值 fixed的意思是“固定的”，意味着元素的位置是相对于浏览器窗口而言的。当设置一个元素的position属性为fixed时，它会被固定在浏览器窗口的某个位置。而这个位置可以通过top、right、bottom、left四个属性来确定。 3. 应用 为了让一个div固定在浏览器窗口的某个位置，只需要在css中给他加上如下属性： ``` position: fixed; top: 50px; left: 50px; ``` 其中，top和left是相对于浏览器窗口的距离，可以根据具体需要来调整。这样，这个div就会留在浏览器窗口的(50,50)处，不受滚动条的影响了。 综上，我们可以利用css中的position属性，将一个div固定在浏览器窗口中的某个位置，实现不随滚动条上下动的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值