`

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

JavaScriptCSSASP.netASPIE 
阅读更多

直接下载就可以使用了！

 

<!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>
 

分享到：
| 收集JQuery的一些资料
评论
2 楼 lixinlixin2008 2009-06-16  
非IE浏览器下可以用fixed
1 楼 香克斯 2009-06-16  
这是我最讨厌的广告样式之一，只要出现肯定adblock掉
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    1. JavaScript在网页中实现图片滚动功能的基本原理。 2. 如何使用HTML和CSS来布局和样式化一个图片轮播的界面。 3. JavaScript插件scrollPic.js的使用方法及其在项目中的应用。 4. 自动滚动功能的实现原理和技巧。 5...

    CSS3 transform图片飞入动画特效

    "CSS3 transform图片飞入动画特效"是一种利用transform属性实现的动态视觉效果，它能让网页元素（比如图片）产生从屏幕两侧飞入的动画效果，提升用户体验和页面的互动性。 首先，我们需要理解CSS3的transform属性。...

    div+css实现的两侧浮动广告JS代码

    这主要包括如何利用HTML、CSS以及JavaScript实现两侧浮动广告的效果。 ### 一、理解需求 首先，我们要明确该功能的目的：创建两个可以随着页面滚动而浮动的广告框，分别位于页面的左侧和右侧。当用户滚动页面时，...

    网页对联广告。对联滚动图片效果

    网页对联广告是一种常见的网页设计元素，通常出现在网站的两侧，形状类似传统的对联，用于展示动态滚动的图片或文字信息。这种效果可以吸引用户的注意力，增加广告的可见度，从而提升网站的互动性和用户体验。在本...

    两种滚动效果的对联广告代码.rar

    在网页设计中，对联广告通常是指位于网页两侧，跟随用户滚动页面而上下移动的广告模块。这种广告形式能够保持用户的视线接触，提高广告的曝光率。本压缩包"两种滚动效果的对联广告代码.rar"包含了一种具有物理弹性...

    两侧可控制的JS左右图片滚动.rar

    总的来说，这个"两侧可控制的JS左右图片滚动"实例展示了JavaScript在网页动态效果中的强大能力，以及如何通过合理的编程技巧和设计模式来实现高效、易维护的代码。对于想要学习JavaScript特效制作的开发者来说，这是...

    js图片左右无缝滚动用鼠标控制图片滚动

    JavaScript 图片左右无缝滚动是一种常见的网页动态效果，用于展示多张图片并使用户可以通过鼠标操作来控制图片的滚动。这种效果常被应用于产品展示、图片画廊或新闻滚动等场景，能够提升用户体验，使得信息浏览更为...

    轮换滚动图片jQuery效果，带有左右箭头

    【轮换滚动图片jQuery效果】是一种常见的网页动态展示技术，常用于网站的广告展示或产品展示区域，可以吸引用户注意力并提升用户体验。这种效果通过JavaScript库jQuery实现，它简化了DOM操作，使得创建动态效果更加...

    随滚动条滚动的两侧的层

    总的来说，要理解和实现“随滚动条滚动的两侧的层”的效果，需要熟悉HTML布局、CSS定位以及可能的JavaScript交互。通过阅读博客文章，查看提供的源码，我们可以深入学习这个技术，并将其应用到自己的项目中。

    网页两侧飘浮广告代码

    这种技术通常基于HTML、CSS和JavaScript实现，以确保广告元素能够随着用户滚动页面而保持固定位置。下面我们将深入探讨这个主题，包括必要的HTML结构、CSS样式和JavaScript实现。 1. **HTML结构**： 在HTML文件中...

    网页滚动广告 随着网页的下拉而跟着走动

    综上所述，“网页两侧滚动广告.html”文件提供了一个实现网页浮动广告的实例，通过结合HTML、CSS和JavaScript技术，使广告元素随着用户滚动保持在视线内，从而提升广告的可见性和互动性。在实际应用中，开发者可以...

    jQuery表格顶部与左右两侧固定滚动代码

    3. **JavaScript计算和动态调整样式**：在用户滚动时，需要计算出新的表头和左侧列的CSS位置，确保它们始终在可视区域。这通常涉及到`offset()`、`scrollTop()`和`scrollLeft()`等方法的使用。 4. **HTML结构**：...

    javascript网站广告代码大全

    在网站的首页两侧放置广告，通常是利用JavaScript来实现定位和响应式设计。根据屏幕尺寸，JavaScript可以调整广告的位置和大小，确保在不同设备上都能良好显示。此外，JavaScript还可以实现广告的动态加载，例如，...

    prettyPhoto支持图片左右滚动加超酷的图片弹出层

    在实际应用中，使用prettyPhoto时，开发人员需要将JavaScript和CSS文件引入到网页中，并对图片链接进行适当的标记。通过设置特定的数据属性（如"data-rel"），可以指定链接属于哪个prettyPhoto组。此外，prettyPhoto...

    网页代码特效实例大全之滚动广告

    本实例大全聚焦于一种常见的特效——滚动广告，通过JavaScript技术实现，这在网页设计中是不可或缺的一部分，尤其对于商业网站和资讯平台，能够有效地展示广告信息并吸引用户的注意力。 滚动广告是一种自动在页面上...

    javascript很好的效果

    图片幻灯切换是网页设计中的经典元素，结合JavaScript和CSS，可以实现多样化的切换效果。JavaScript用于控制切换逻辑，如定时切换、响应用户点击事件等，CSS则用于定义样式和动画效果。例如，可以使用`display`属性...

    带按钮控制的图片滚动

    在IT行业中，图片滚动是一种常见的视觉效果，尤其在网页设计和移动应用开发中。这个"带按钮控制的图片滚动"专题主要关注如何实现一个具备左右控制功能的无缝滚动图片的效果。这种功能允许用户通过点击左右按钮来浏览...

    两侧图片模糊效果jQuery焦点图切换插件

    【标题】中的“两侧图片模糊效果jQuery焦点图切换插件”指的是一个JavaScript插件，它专为网页设计人员提供了一种动态展示图像焦点图的方法。焦点图，也称为轮播图或幻灯片，通常用于在有限的空间内展示多张图片，...

    超级经典一套鼠标控制左右滚动图片带自动翻滚

    这种效果通常通过JavaScript实现，用户可以通过鼠标在图片两侧滑动来控制图片的左右滚动，同时设置自动翻滚功能可以增加动态效果，使得用户在无需手动操作的情况下也能流畅地查看图片序列。这样的设计适用于产品展示...

    js 右侧图片随着鼠标滚动

    根据提供的文件信息，我们可以深入探讨相关的JavaScript技术及其实现效果——即如何使页面中的图片跟随鼠标滚动，并在必要时提供关闭功能。此类效果常用于网页设计中，特别是那些需要增强用户体验或实现特定视觉效果...

Magicbox
Global site tag (gtag.js) - Google Analytics