js实现两边广告流动的效果<转>.

最新推荐文章于 2023-03-27 14:44:42 发布
最新推荐文章于 2023-03-27 14:44:42 发布
阅读量202 收藏
点赞数
分类专栏： script wordpress 互联网 文章标签： js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ld326/article/details/84385920
版权
互联网 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
script
3 篇文章 0 订阅
订阅专栏
wordpress
2 篇文章 0 订阅
订阅专栏 
<!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=gb2312" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>js页面跟随滚动条两侧漂浮广告</title>
<style type="text/css">
div.floats {/*浮动容器通用样式*/
 position:absolute;
 left:-1000px;
 /*上面两句是必需的，下面看实际情况去定义了*/
 border:solid 1px #777;
 padding:3px;
 background:#333;
 color:white;
 width:100px;
 height:80px;
 opacity: 0.5;
 filter:alpha(opacity=50);
 
}
div#test1,div#test2{top:100px;}/*居中向左右定位容器初始高度*/
div#test3,div#test4{top:200px;}/*左右定位的两个容器初始高度*/
</style><script type="text/javascript">
var D=new Function('obj','return document.getElementById(obj);')
function htmlbody(){
 return (
  document.documentElement.clientHeight<=document.body.clientHeight
  &&document.documentElement.clientHeight!=0
 )
 ?document.documentElement:document.body;
}
//浏览器滚动条位置
function scrollLeft(){return (!window.pageYOffset)?htmlbody().scrollLeft:window.pageXOffset;}
function scrollTop(){return (!window.innerHeight)?htmlbody().scrollTop:window.pageYOffset;}//实际应距左距离
function getleft(strobjs,strLeftType,strleft){
 var temp_getleft = 0;
 if (strLeftType=="left"){
  temp_getleft = scrollLeft()*1 + strleft*1;
 }else if (strLeftType=="mid"){
  (strleft*1<0)
  ?temp_getleft = scrollLeft()*1 + strleft*1
  + htmlbody().clientWidth*1/2 - strobjs.offsetWidth*1
  :temp_getleft = (scrollLeft()*1+strleft*1 + htmlbody().clientWidth*1/2);
 }else if (strLeftType=="right"){
   temp_getleft 
   = scrollLeft()*1 + htmlbody().clientWidth*1 
   - strleft*1 - strobjs.offsetWidth*1;
 }
 return temp_getleft;
}function moveTips(strobj,theTop,theLeft,theLeftType) {
 var old,nowobj = D(strobj);
 var nowleft = nowobj.style.left.replace("px","")*1;//返回在改变窗口大小或移动横滚动条前的距左部距离（数值）
 var temp_left = getleft(nowobj,theLeftType,theLeft);//实际应距左距离
 var re_theTop = theTop;
 if (temp_left!=nowleft){//横向递增
  (Math.abs(temp_left-nowleft)>3&&Math.abs(temp_left-nowleft)<600)
  ?((temp_left>nowleft)?nowleft += Math.abs(temp_left-nowleft)/5
  :nowleft -= Math.abs(temp_left-nowleft)/5)
  :nowleft = temp_left;
  nowobj.style.left = nowleft + "px";
 }
 if (!openweb){old = re_theTop;var openweb;}/*这是默认高度*/;
  var pos,tt=50;
  pos = scrollTop()*1-nowobj.offsetTop*1+re_theTop*1;
  pos = nowobj.offsetTop+pos/10;//纵向开始递增
  if (pos < re_theTop) pos = re_theTop;
  if (pos != old) {nowobj.style.top = pos+"px";tt=5;}
  old = pos;
  setTimeout("moveTips('"+strobj+"','"+theTop+"','"+theLeft+"','"+theLeftType+"')",tt);
}
</script></head>
<body>
<div style="width:660px;border:1px solid #eee;margin:0 auto;height:3000px;">
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
</div>
页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～
<div style="width:5000px;">
</div>
<div id="test1" class="floats">浮动层1 !</div>
<div id="test2" class="floats">浮动层2 !</div>
<div id="test3" class="floats">浮动层3 !</div>
<div id="test4" class="floats">浮动层4 !</div> <script type="text/javascript">
 moveTips('test1','100','332','mid',"0");
 moveTips('test2','100','-332','mid',"0");
 moveTips('test3','200','10','left',"1");
 moveTips('test4','200','10','right',"1");
</script>
</body>
</html>

 

happyprince
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现左右两侧浮动广告
10-18
主要为大家详细介绍了js实现左右两侧浮动广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Js制作移动漂浮广告
记录日常工作的思考
07-27 748
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script> var directX=1;//x轴的方向 var directY=1;//y轴的方向 var moveX=0;//图片的坐标 var moveY=0; v
js水波流动效果（仿电信流量球）
10-10
前端h5+js+css3实现的圆圈内水波滚动显示百分比效果，代码未加密可自由修改
JS特效：两侧广告跟随
Chongch_M的博客
10-01 1361
1.首先分析一下，两侧广告跟随，就是在鼠标向下滚动时，左右两幅图也跟着向下滚动相等的距离 2.可以知道假设鼠标向下滚动了100px的话，那么两个图片也是向下滚动了100px，他的位置就是100加上图片距离父标签的距离 3.现在还要实现一个图片的缓慢移动，就是设置一个计时器，分步骤将图片一步一步的走到最终的位置 4.用当前屏幕被卷去的长度在加上距离上屏幕的高度就是图片应该到达的位置y，此时用y减去当前图片距离顶部的距离，就是图片到达y的距离sum。 5.要实现缓慢移动的话可以将sum/10,图片一点一点的移动
js滚动广告效果
snowyz的专栏
09-20 732
<br />上下翻滚的js滚动广告效果， 通过js操作table的position来实现。<br />运行代码运行代码 < type="text/javascript"><br /> view plaincopy to clipboardprint?<HTML>   <HEAD>    <title>test</title>    <style>        #g_div{        text-align:right;        overflow:hidden;       }      .b{
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
热门推荐
qq_54753561的博客
12-25 25万+
2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 import export、箭头函数、generator函数、promise let cosnt ......
前端 js实现模糊搜索
q4717529的博客
02-16 5233
前端 js实现模糊搜索
前端面试题
lyclyc_的博客
07-17 1194
高频面试题（笔试题） 1、简述 <!doctype> 的作用？ 声明文档类型，告诉浏览器以哪种规范来解析文档 2、常见的浏览器及其内核？ 浏览器：IE，Chrome，FireFox，Safari，Opera。 内核：Trident，Gecko，Presto，Webkit。 使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是ie内核 使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscap
2024前端面试题！（附答案及解析）（2024.5月最新版）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 5万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.5月最新版）
js实现简单的左右两边固定广告效果实例
12-10
本文实例讲述了js实现简单的左右两边固定广告效果的方法。分享给大家供大家参考。具体分析如下： 大多数网站都有左右两边的固定广告位，下面呢就是实现这个效果的最简单的代码，可能在ie下滚动的时候会有一点抖动，这个问题以后再解决了，先实现再说。 要点一： var adtop = adleft.offsetTop; 获得元素距离上边的位置，在滚动的时候需要用到。 要点二： 代码如下:adleft.style.top=adtop+(document.documentElement.scrollTop || document.body.scrollTop)+”px”;滚动时，给元素的上边位置赋值为元素本
js 居中漂浮广告
10-29
整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrollTop + browser.clientHeight).这里提供了获取这几个值的代码.
Vue中通过<script></script>引入的Vue.js文件
04-28
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...
同步任务顺序： <li>1.console.log("script- 111");</li>
04-18
---然后跳出整个async1函数来执行后面js栈的代码</li> <li>4.console.log("promise1-111");</li> </ul> <ul> 异步任务顺序: <li>1.回到async1函数中等待await后面表达式的返回值</li> <li>2.promise的.then()...
HTML CSS整理笔记（建议收藏）
lin123_00的博客
04-23 972
点击链接后退页面： <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式： 我的学习交流群点击此处 1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号： 给定宽度(width:100px)、 ...
jquery实现led广告牌旋转系统图片切换效果.zip
07-11
jquery实现led广告牌旋转系统图片切换效果，实现图片的旋转特效，很有新意，php中文网推荐下载！
JS实现侧边栏鼠标经过弹出框+缓冲效果
liujian573281的博客
01-17 2343
可能这个标题起得不够恰当，简单来说就是：当鼠标移到最左侧时，移出一个框。 首先，我们用两个div来简单布局以下页面：<div id="box"> <div id="share">分享到</div> </div>这个分享框的弹出原理是：把内层div定位到外层div最右侧紧贴，然后把外层div定位到屏幕左外测，left的值与宽度相等，刚好隐藏掉就可以。当鼠标经过时，再通过改变left的值使外层
将下面的代码换成imports的<!DOCTYPE html> <html> <head> <title>Three.js Example</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="js/libs/three.js"></script> <script src="js/libs/GLTFLoader.js"></script> <script src="js/libs/OrbitControls.js"></script> <script>
最新发布
05-31
<title>Three.js Example</title> <style> body { margin: 0; overflow: hidden; } </style> <script type="importmap"> { "imports": { "three": "./js/libs/three.module.js", "three/examples/jsm/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值