(转)利用javascript和css做的网页两侧滚动的图片

最新推荐文章于 2020-08-27 19:47:52 发布
最新推荐文章于 2020-08-27 19:47:52 发布
阅读量346 收藏
点赞数
文章标签： javascript css border function string xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinfu1224/article/details/4411968
版权

<!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" />
<title>一段左右两边随屏滚动的代码</title>
</head>

<body>
<script language="javascript">
var delta=0.15
var collection;
var closeB=false;
function floaters(){
this.items=[];
this.addItem=function (id,x,y,content)
{
   document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof (x)=='string'?eval(x):x)+';top:'+(typeof (y)=='string'?eval(y):y)+'">'+content+'</DIV>');
   var newItem={
   };
   newItem.object=document.getElementById(id);
   newItem.x=x;
   newItem.y=y;
   this.items[this.items.length]=newItem;
}
this.play=function ()
{
   collection=this.items
   setInterval('play()',10);
}
}

function play()
{
if(screen.width<=648||closeB)
{
   for(var i=0;i<collection.length;i++)
   {
    collection[i].object.style.display='none';
   }
   return ;
}
for(var i=0;i<collection.length;i++)
{
   var followObj=collection[i].object;
   var followObj_x=(typeof (collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
   var followObj_y=(typeof (collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
   if(followObj.offsetLeft!=(document.documentElement.scrollLeft+followObj_x))
   {
    var dx=(document.documentElement.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
    followObj.style.left=followObj.offsetLeft+dx;
   }
   if(followObj.offsetTop!=(document.documentElement.scrollTop+followObj_y))
   {
    var dy=(document.documentElement.scrollTop+followObj_y-followObj.offsetTop)*delta;
    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
    followObj.style.top=followObj.offsetTop+dy;
   }
   followObj.style.display='';
}
}

function closeBanner()
{
closeB=true;
return ;
}
var theFloaters=new floaters();
//
theFloaters.addItem('followDiv2',22,238,'<a href=http://idc.66so.com/ target=_blank><img src=http://www.asp300.com/adimg/66so.gif border=0></a><br><br><a href=http://www.red.net.cn target=_blank><img src=http://www.asp300.com/adimg/red.gif border=0></a><br><br><a href=http://www.wiidc.com target=_blank><img src=http://www.asp300.com/adimg/wiidc.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">');
theFloaters.addItem('followDiv1','document.body.clientWidth-100',238,'<a href=http://www.zgdata.com/stat/stat.asp?siteKey=asp300&pageNO=1&urlCode=91a3ed97bd9897d315ff6bfaba46a8ee target=_blank><img src=http://www.asp300.com/adimg/zgdata.gif border=0 height=80 width=80></a><br><br><a href=http://www.go020.net/style/info/host.asp?typeid=1 target=_blank><img src=http://www.asp300.com/adimg/go020.gif border=0></a><br><br><a href=http://www.phsjnet.com target=_blank><img src=http://www.asp300.com/adimg/phsjnet.gif border=0></a><br><br><img align=right src=http://www.asp300.com/images/ADclose.gif border=0 onClick="closeBanner();">');
theFloaters.play();


</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

xinfu1224
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
11-25
本文实例讲述了javascript实现图片左右滚动效果。分享给大家供大家参考，具体如下： html代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <meta name="keywords" content=""/> <meta name="description" conten
利用javascript和css做的网页两侧滚动的图片
p_x1984的专栏
06-16 187
直接下载就可以使用了！   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head...
JavaScript实现上下滑动的侧边栏
Sibmle
07-03 1233
这个是在很多网站中侧边导航栏有的功能，比如那种很招人烦的咨询广告，下面是一个简化版：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body{ height: 2
原生js焦点图片和文字标题淡出淡进轮播切换代码
11-17
原生js焦点图片和文字标题淡出淡进轮播切换代码
图片格式的JavaScript和CSS速查手册
10-30
图片格式的JavaScript和CSS速查手册
基于JavaScript和CSS的母婴之家网页设计源码 - myzj
最新发布
05-29
本源码提供了一个基于JavaScript和CSS的母婴之家网页的设计。项目包含139个文件，其中包括36个PNG文件、28个GIF文件、26个JavaScript文件、13个HTML文件、10个CSS文件、10个JPG文件和10个SCSS文件。此外，还有3个...
基于javascript 和 css开发的 web video插件.zip
03-18
基于javascript 和 css开发的 web video插件.zip基于javascript 和 css开发的 web video插件.zip基于javascript 和 css开发的 web video插件.zip基于javascript 和 css开发的 web video插件.zip基于javascript 和 ...
基于CSS和JavaScript的网页滚动字幕.pdf
01-03
基于CSS和JavaScript的网页滚动字幕.pdf
(转)网页窗体-两边的图片随着滚动条的滚动而滚动
weixin_30596023的博客
01-23 205
Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <HTML> <HEAD> <TITLE>NewDocument</TITLE> <METANAME="Generator"CONTENT="EditPlus"> ...
Html网页图片滚动代码
hughhzh的专栏
06-21 7257
var speed=30 butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1为butong_net_top2 function Marquee1(){ //当滚动至butong_net_top1与butong_net_top2交界时 if(butong_net_top2.offsetTop-butong_n
网页连续滚动图片
gkyh899的专栏
10-23 678
javascript： var speed=50; var tab=document.getElementByIdx_x_x("gd"); var tab1=document.getElementByIdx_x_x("gdcont"); var tab2=document.getElementByIdx_x_x("gdcont2"); tab2.innerHTML=tab1.innerHTML;
使用 MARQUEE HTML中实现图片的各种滚动效果
popping_dancer的专栏
12-23 2657
注释： 1) scrollAmount。它表示速度，值越大速度越快。 2) 加入onmouseover=stop()  onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。 给滚动图片加超链接 用和把包围，并且img必须设border=0，否则图片会出现边框。例子如下： 图片从右到左滚动 ···  图片从下到上滚动
前端学习（2075）：计算属性的基本使用
歌谣的博客
08-27 393
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
js实现图片加载特效（从左到右，百叶窗，从中间到两边）
weixin_33739541的博客
04-28 383
/* 　　网上百度的，感觉”从中间到两边“的效果写的不是很好，改了一下，感觉可以了！ */ <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8...
javascript实现滚动图片
web开发自学
06-28 145
前台： &lt;div class="block"&gt; &lt;div class="title"&gt; &lt;strong&gt;服务展示 &lt;/strong&gt; &lt;/div&gt; &lt;div class="content&quot
常用的页面左右边及漂浮图片代码
zgqtxwd的专栏
05-01 1737
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
用HTML5 css3 和javascript做一个网页
06-08
好的，我可以为您提供一些指导和建议。首先，您需要一个文本编辑器，比如Sublime Text或Visual Studio Code。然后，您可以按照以下步骤开始： 1. 创建一个HTML文件，并在其中添加基本的HTML结构： ``` <!DOCTYPE...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值