在网页上设计飘动广告

2016-02-19 18:31 36 1 收藏

今天图老师小编要跟大家分享在网页上设计飘动广告,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

  把下面的代码加入head.../head之间:

var brOK=false;  
var mie=false; 
var aver=parseInt(navigator.appVersion.substring(0,1));  
var aname=navigator.appName;  
  //check browser  
function checkbrOK()  
{
 if(aname.indexOf("Internet Explorer")!=-1)  
 {
  if(aver=4)
   brOK=navigator.javaEnabled(); 
  mie=true;  
 } 
 if(aname.indexOf("Netscape")!=-1)    
 {
  if(aver=4)
   brOK=navigator.javaEnabled();
 } 

var vmin=5; 
var vmax=2; 
var vr=2; 
var timer1; 
function Chip(chipname,width,height) 
{
   this.named=chipname; 
   this.vx=vmin+vmax*Math.random(); 
   this.vy=vmin+vmax*Math.random(); 
   this.w=width; 
   this.h=height; 
   this.xx=0; 
   this.yy=0; 
   this.timer1=null; 

function movechip(chipname)

   if(brOK) 
   {
  eval("chip="+chipname); 
  if(!mie) 
  {
   pageX=window.pageXOffset; 
   pageW=window.innerWidth; 
   pageY=window.pageYOffset; 
   pageH=window.innerHeight; 
  } 
  else 
  {
   pageX=window.document.body.scrollLeft; 
   pageW=window.document.body.offsetWidth-8; 
   pageY=window.document.body.scrollTop; 
   pageH=window.document.body.offsetHeight; 
  }  
  chip.xx=chip.xx+chip.vx; 
  chip.yy=chip.yy+chip.vy; 
  chip.vx+=vr*(Math.random()-0.5); 
  chip.vy+=vr*(Math.random()-0.5); 
  if(chip.vx(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx; 
  if(chip.vx(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx; 
  if(chip.vy(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy; 
  if(chip.vy(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy; 
  if(chip.xx=pageX) 
  {
   chip.xx=pageX; 
   chip.vx=vmin+vmax*Math.random(); 
  } 
  if(chip.xx=pageX+pageW-chip.w) 
  {
   chip.xx=pageX+pageW-chip.w; 
   chip.vx=-vmin-vmax*Math.random(); 
  } 
  if(chip.yy=pageY) 
  {
   chip.yy=pageY; 
   chip.vy=vmin+vmax*Math.random(); 
  } 
  if(chip.yy=pageY+pageH-chip.h) 
  {
   chip.yy=pageY+pageH-chip.h; 
   chip.vy=-vmin-vmax*Math.random(); 
  } 
 &

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

CSS教程是:在网页上设计飘动广告。nbsp;if(!mie) 
  {
   eval("document."+chip.named+".top ="+chip.yy);  
   eval("document."+chip.named+".left="+chip.xx);  
  }   
  else  
  {
   eval("document.all."+chip.named+".style.pixelLeft="+chip.xx);  
   eval("document.all."+chip.named+".style.pixelTop ="+chip.yy);  
  }  
  chip.timer1=setTimeout("movechip(""+chip.named+"")",100);  
 }  
}  
function stopme(chipname) 
{
 if(brOK) 
 {//alert(chipname) 
  eval("chip="+chipname); 
  if(chip.timer1!=null)   
  {
   clearTimeout(chip.timer1);
  } 
 }
}  

var floater; 
function floater()  
{
 checkbrOK();   
    floater=new Chip("floater",0,0); 
    if(brOK)  
    {
  movechip("floater"); 
 }
 } 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

把下面的代码加入body.../body之间:

div id=floater style="HEIGHT: 0px;  POSITION: absolute;  WIDTH: 0px; left: 680px; top: 150px; z-index:100"
a href=http://www.webjx.com arget=_blank
img border=0 src=http://www.webjx.com/images/Logo.gif/a
/div

这里你可以改成自己要的图片路径.

来源:http://www.tulaoshi.com/n/20160219/1617999.html

延伸阅读
标签: 网页设计 设计
留白 日本的设计有一个最大的特点就是极简,极简意味着留白。留白,也可以称为负空间。留白并非只是简单的指白色空间部分,它也可能是同个网页下的各个元素的空白空间。 这样的留白可以体现在多个地方,比如:幻灯片、区块边距、布局、行距、图表等。处理留白比较考验设计师的设计能力,留白可以打造简约的风格特点,而在哪里留白就...
在设计中,对称创造了平衡,平衡了创造和谐、秩序和审美。自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美。形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性。 However, symmetry can get boring. Asymmetry is a break in symmetry, which when used e...
标签: Web开发
      在各种网页制作技术论坛中,常常有人询问javascript与Java有什么区别,甚至有人误认为javascript就是Java。javascript与Java确实有一定的联系,但它们并不像我们想象的那样联系紧密,甚至可以肯定地说它们有很大的区别。  什么是javascript ?  javascript 是对...
如何在网页上添加阿里旺旺2015头像图标   首先看下图,这是一个典型的多旺旺客服专区,如何设定呢? 首先进入阿里旺旺的官方首页,地址在这里:http://im.alisoft.com/info.html?flag=3 在功能介绍栏目中,找到旺遍天下按钮: 页面右侧可以看到旺遍天下生成代码的步骤,非常简单快捷。 注意:头像可以由两种...
A: FOR REDHAT6.0 STEP: 1.下载chpasswd-1.3.tar.gz ftp://ftp.nsysu.edu.tw/Linux/metalab.unc.edu/system/a dmin/accounts/chpasswd-1.3.tar.gz 2.将chpasswd-1.3.tar.gz上传至/home/httpd 3. tar zxvf chpasswd-1.3.tar.gz 4. cd chpasswd-1.3 5. ./configure.sh (注意点号) 6. make 7. make install 8. 大功完成 9. 在网页上执行...

经验教程

734

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部