转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
使你的主页千变万化         ★★★★

使你的主页千变万化

作者:闵涛 文章来源:闵涛的学习笔记 点击数:545 更新时间:2009/4/23 11:21:11
  不少网友发E-mail问我:“怎么每次去你的主页,看到的图片都不一样,难道你时时刻刻都在更换图片吗?”天啊,我哪有那么多钱支付电话费?我只不过用了JavaScript的小技巧做了个“随机图片”而已。其HTML源代码为:

  < !随机图片开始 >

  < script language=″JavaScript″ >

  < !--

  imglink=new Date();

  var thisimg=″1.jpg″;

  if(imglink.getSeconds()< 54){var thisimg=″2.jpg″;}

  if(imglink.getSeconds()< 46){var thisimg=″3.jpg″;}

  if(imglink.getSeconds()< 39){var thisimg=″4.jpg″;}

  if(imglink.getSeconds()< 32){var thisimg=″5.jpg″;}

  if(imglink.getSeconds()< 24){var thisimg=″6.jpg″;}

  if(imglink.getSeconds()< 17){var thisimg=″7.jpg″;}

  if(imglink.getSeconds()< 9){var thisimg=″8.jpg″;}

  document.write(″< img src=″+thisimg+″ border=0 alt=″每次打开本页,看到的图片都不同!″ >″);

  //-- >

  < /script >

  < !随机图片结束 >

  在这个例子中,设置了8张图片,与网页放置于同一目录下。当浏览器打开此网页时,立即从电脑里读取时间,并根据秒数的不同选择不同的图片。

  我们也常常埋怨在网页里插入的图片与网页背景不能很好地融合在一起,如果图片周围有一圈朦胧的过渡色该多好!用Photoshop制作图片当然能实现这个效果。其实还有更好的办法:在网页中用 CSS 滤镜来实现!

  < p style=″line-height:0pt;filter:Glow

(Color=#FFFFFF,Strength=36);height:auto;position:relative;padding:21pt″ >

  < img src=″1.jpg″ border=0 >

  < /p >

  其中,“Color=#FFFFFF”是定义阴影的颜色,“Strength=36”是定义阴影宽度。怎么样,图片是不是有了“月朦胧,鸟朦胧”的感觉?

  如果你不喜欢“温馨浪漫”的主页类型,这里还有一款“魔幻豪放”派的——

  在< head >< /head >中加入以下内容:

  < !开始定义变色函数 >

  < script language=″JavaScript″ >

  < !--hide

  function RandomNumber(max) //定义随机函数

  {var today=new Date();

  var num=Math.round((Math.abs(Math.sin(today.getTime()))*1000))%max+1;return num;}

  function makearray(n)

  {this.length=0;for(var i=1;i< n;i++)this[i]=0;return this;}function changecolor()

  {clearTimeout();

  linkarray=new makearray(10); //用linkarray数组定义十种常用颜色

  linkarray[1]=″#ff0000″;

  linkarray[2]=″#ffff00″;

  linkarray[3]=″#00ff00″;

  linkarray[4]=″#0000ff″;

  linkarray[5]=″#8000ff″;

  linkarray[6]=″#ff00ff″;

  linkarray[7]=″#004000″;

  linkarray[8]=″#808000″;

  linkarray[9]=″#ff8000″;

  linkarray[10]=″#ff0000″;

  document.bgColor=(linkarray[RandomNumber(10)]); //利用随机函数从十种颜色中任选一种作为网页背景色

  setTimeout(″changecolor()″,1000); //设置时钟,让背景色每秒变换一次

  return;}

  //-- >

  < /script >

  < !定义变色函数结束 >

  然后在中调用changecolor()函数即可:< body OnLoad=″javascript:changecolor()″ >

  网页背景颜色每秒钟变换一次,够酷吧?

  如果把“document.bgColor=(linkarray[RandomNumber(10)]);”一句中的“bgColor”换成“fgColor”,也能实现网页文字不断地变色。此外,你也可以自己定义变色的时间周期,改变“setTimeout(″changecolor()″,1000);”中的“1000”即可。 

 (河北 漠鹰)


没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台