html特效代码（一）

html特效代码（二）

图片漂浮广告代码

  1. <bodybgcolor="#F7F7F7">

  2. <!--图片漂浮广告代码开始-->

  3. <divid="www_qpsh_com"style="position:absolute">

  4. <!--链接地址--><ahref="www.baidu.com"_fcksavedurl="/"target="_blank">

  5. <!--图片地址--><imgsrc="http://www.baidu.com"_fcksavedurl="http://www.dabaoku.com/images/logo.gif"border="0">

  6. </a>

  7. </div>

  8. <script>

  9. var x = 50,y = 60

  10. var xin = true, yin = true

  11. var step = 1

  12. var delay = 10

  13. var obj=document.getElementById("www_qpsh_com")

  14. function floatwww_qpsh_com() {

  15. var L=T=0

  16. //by www.qpsh.com

  17. var R= document.body.clientWidth-obj.offsetWidth

  18. var B = document.body.clientHeight-obj.offsetHeight

  19. obj.style.left = x + document.body.scrollLeft

  20. obj.style.top = y + document.body.scrollTop

  21. xx = x + step*(xin?1:-1)

  22. if (x <L) { xin = true; x = L}

  23. if (x > R){ xin = false; x = R}

  24. yy = y + step*(yin?1:-1)

  25. if (y <T) { yin = true; y = T }

  26. if (y > B) { yin = false; y = B }

  27. }

  28. var itl= setInterval("floatwww_qpsh_com()", delay)

  29. obj.onmouseover=function(){clearInterval(itl)}

  30. obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}

  31. </script>

  32. <!--图片漂浮广告代码结束-->

  33. </body>

围绕鼠标的立体旋转文字

  1. <html>

  2. <head>

  3. <title>围绕鼠标的立体旋转文字</title>

  4. <metacontent="text/html; charset=gb2312"http-equiv="Content-Type">

  5. <metacontent="Microsoft FrontPage 5.0"name="GENERATOR">

  6. </head>

  7. <body>

  8. <scriptLANGUAGE="JavaScript">

  9. <!-- Begin

  10. if (document.all) {

  11. yourLogo = "百家联盟欢迎你";  //Not less than 2 letters!

  12. logoFont = "Arial";

  13. logoColor = "ff0000";

  14. //Nothing needs altering below!

  15. yourLogoyourLogo = yourLogo.split('');

  16. L = yourLogo.length;

  17. TrigSplit = 360 / L;

  18. Sz = new Array()

  19. logoWidth = 100;

  20. logoHeight = -30;

  21. ypos = 0;

  22. xpos = 0;

  23. step = 0.09;

  24. currStep = 0;

  25. document.write('<divid="outer"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  26. for (i = 0; i <L; i++) {

  27. document.write('<divid="ie"style="position:absolute;top:0px;left:0px;'

  28. +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'

  29. +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');

  30. }

  31. document.write('</div></div>');

  32. function Mouse() {

  33. ypos = event.y;

  34. xpos = event.x - 5;

  35. }

  36. document.onmousemove=Mouse;

  37. function animateLogo() {

  38. outer.style.pixelTop = document.body.scrollTop;

  39. for (i = 0; i <L; i++) {

  40. ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);

  41. ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);

  42. Sz[i] = ie[i].style.pixelTop - ypos;

  43. if (Sz[i] <5) Sz[i] = 5;

  44. ie[i].style.fontSize = Sz[i] / 1.7;

  45. }

  46. currStep -= step;

  47. setTimeout('animateLogo()', 20);

  48. }

  49. window.onload = animateLogo;

  50. }

  51. //  End -->

  52. </script>

  53. </body>

  54. </html>

文本特效-打字效果的网站公告

  1. <html>

  2. <head>

  3. <title>网页特效-文本特效-打字效果的网站公告</title>

  4. <FCK:metahttp-equiv="content-Type"content="text/html;charset=gb2312"/>

  5. <body>

  6. <!--把下面代码加到<body>与</body>之间-->

  7. 百晓生说明：<aid="HotNews"href=""_fcksavedurl=""target="_blank"></a>

  8. <scriptlanguage="javascript">

  9. <!--

  10. var NewsTime = 2000;//每条新闻的停留时间

  11. var TextTime = 50; //新闻标题文字出现等待时间，越小越快

  12. var newsi = 0;

  13. var txti = 0;

  14. var txttimer;

  15. var newstimer;

  16. var newnewstitle = new Array();//新闻标题

  17. var newnewshref = new Array(); //新闻链接

  18. newstitle[0] = "关于百晓生，大家都比较熟的了、呵呵，如果有想了解的就直接去我的暂住小站哈，http://infodown.tap.cn，欢迎来访，欢迎留言";

  19. newshref[0] = "http://infodown.tap.cn";

  20. function shownew()

  21. {

  22. var endstr = "_"

  23. hwnewstr = newstitle[newsi];

  24. newslink = newshref[newsi];

  25. if(txti==(hwnewstr.length-1)){endstr="";}

  26. if(txti>=hwnewstr.length){

  27. clearInterval(txttimer);

  28. clearInterval(newstimer);

  29. newsi++;

  30. if(newsi>=newstitle.length){

  31. newsi = 0

  32. }

  33. newstimer = setInterval("shownew()",NewsTime);

  34. txti = 0;

  35. return;

  36. }

  37. clearInterval(txttimer);

  38. document.getElementById("HotNews").href=newslink;

  39. document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;

  40. txti++;

  41. txttimer = setInterval("shownew()",TextTime);

  42. }

  43. shownew();

  44. //-->

  45. </script>

  46. </body>

  47. </html>

无法屏蔽的网页右下角浮动窗口

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <title>无法屏蔽的网页右下角浮动窗口</title>

  5. <metahttp-equiv="content-type"content="text/html;charset=gb2312">

  6. <styletype="text/css">

  7. #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;}

  8. #msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}

  9. .icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}

  10. .icos a:hover{color:#fff;}

  11. #msg_title{background:#FECD00;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}

  12. #msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;}

  13. </style>

  14. </head>

  15. <body>

  16. <pstyle="height:1000px;"></p>

  17. <divid="msg_win"style="display:block;top:490px;visibility:visible;opacity:1;">

  18. <divclass="icos"><aid="msg_min"title="最小化"href="void 0"< /span>>_</a><aid="msg_close"title="关闭"href="void 0"< /span>>×</a></div>

  19. <divid="msg_title">网页制作大宝库</div>

  20. <divid="msg_content">网页制作大宝库dabaoku.com</div>

  21. </div>

  22. <scriptlanguage="javascript">

  23. var Message={

  24. set: function() {//最小化与恢复状态切换

  25. var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];

  26. this.minbtn.status=set[0];

  27. this.win.style.borderBottomWidth=set[1];

  28. this.content.style.display =set[2];

  29. this.minbtn.innerHTML =set[3]

  30. this.minbtn.title = set[4];

  31. thisthis.win.style.top = this.getY().top;

  32. },

  33. close: function() {//关闭

  34. this.win.style.display = 'none';

  35. window.onscroll = null;

  36. },

  37. setOpacity: function(x) {//设置透明度

  38. var v = x>= 100 ? '': 'Alpha(opacity=' + x + ')';

  39. this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug

  40. this.win.style.filter = v;

  41. this.win.style.opacity = x / 100;

  42. },

  43. show: function() {//渐显

  44. clearInterval(this.timer2);

  45. var me = this,fx = this.fx(0, 100, 0.1),t = 0;

  46. this.timer2 = setInterval(function() {

  47. t = fx();

  48. me.setOpacity(t[0]);

  49. if (t[1] == 0) {clearInterval(me.timer2) }

  50. },10);

  51. },

  52. fx: function(a, b, c) {//缓冲计算

  53. var cMath = Math[(a - b) > 0 ? "floor": "ceil"],cc = c || 0.1;

  54. return function() {return [a += cMath((b - a) * c), a - b]}

  55. },

  56. getY: function() {//计算移动坐标

  57. var d = document,b = document.body, e = document.documentElement;

  58. var s = Math.max(b.scrollTop, e.scrollTop);

  59. var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;

  60. var h2 = this.win.offsetHeight;

  61. return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}

  62. },

  63. moveTo: function(y) {//移动动画

  64. clearInterval(this.timer);

  65. var me = this,a = parseInt(this.win.style.top)||0;

  66. var fx = this.fx(a, parseInt(y));

  67. var t = 0 ;

  68. this.timer = setInterval(function() {

  69. t = fx();

  70. me.win.style.top = t[0]+'px';

  71. if (t[1] == 0) {

  72. clearInterval(me.timer);

  73. me.bind();

  74. }

  75. },10);

  76. },

  77. bind:function (){//绑定窗口滚动条与大小变化事件

  78. var me=this,st,rt;

  79. window.onscroll = function() {

  80. clearTimeout(st);

  81. clearTimeout(me.timer2);

  82. me.setOpacity(0);

  83. st = setTimeout(function() {

  84. meme.win.style.top = me.getY().top;

  85. me.show();

  86. },600);

  87. };

  88. window.onresize = function (){

  89. clearTimeout(rt);

  90. rt = setTimeout(function() {meme.win.style.top = me.getY().top},100);

  91. }

  92. },

  93. init: function() {//创建HTML

  94. function $(id) {return document.getElementById(id)};

  95. this.win=$('msg_win');

  96. var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};

  97. for (var Id in set) {this[Id] = $(set[Id])};

  98. var me = this;

  99. this.minbtn.onclick = function() {me.set();this.blur()};

  100. this.closebtn.onclick = function() {me.close()};

  101. this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体

  102. thisthis.minbtn.innerHTML=this.char[0];

  103. thisthis.closebtn.innerHTML=this.char[2];

  104. setTimeout(function() {//初始化最先位置

  105. me.win.style.display = 'block';

  106. meme.win.style.top = me.getY().foot;

  107. me.moveTo(me.getY().top);

  108. },0);

  109. return this;

  110. }

  111. };

  112. Message.init();

  113. </script>

  114. </body>

  115. </html>

本文出自 “成鹏致远” 博客，请务必保留此出处http://infohacker.blog.51cto.com/6751239/1171465

【web技术】html特效代码（二）的更多相关文章

  1. Java Web技术总结（目录）

    来源于:http://www.jianshu.com/p/539bdb7d6cfa Java Web技术经验总结(一) Java Web技术经验总结(二) Java Web技术经验总结(三) Java ...

  2. 【web技术】html特效代码（一）

    小续 还记得当初和八哥一起制作百家成员chm电子书的时候,各种特效啊,这里收集了一些个人比较喜欢的html特效,看个人喜欢了,不喜勿喷啊 html特效代码(一) html特效代码(二) 3D相册代码 ...

  3. GraalVM最佳实践，使用Java开发CLI、Desktop(JavaFX)、Web(SpringBoot)项目，并使用native-image技术把Java代码静态编译为独立可执行文件（本机映像）

    原创文章,转载请注明出处! 源码地址: Gitee Gtihub 介绍 GraalVM最佳实践,使用Java开发CLI.Desktop(JavaFX).Web(SpringBoot)项目,并使用nat ...

  4. ASP.NET Web API 控制器创建过程(二)

    ASP.NET Web API 控制器创建过程(二) 前言 本来这篇随笔应该是在上周就该写出来发布的,由于身体跟不上节奏感冒发烧有心无力,这种天气感冒发烧生不如死,也真正的体会到了什么叫病来如山倒,病 ...

  5. IIS7.5使用web.config设置伪静态的二种方法

    转自 网上赚钱自学网 .http://www.whosmall.com/post/121 近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两 ...

  6. 深入分析Java Web技术内幕（修订版）

    阿里巴巴集团技术丛书 深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波 著   ISBN 978-7-121- ...

  7. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  8. JavaScript的角色巨变和Web技术的发展

    曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它. JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证. 最初职业程序员轻视JavaScript ...

  9. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

随机推荐

  1. Linux-配置虚拟IP

    Linux下配置网卡ip别名何谓ip别名?用windows的话说,就是为一个网卡配置多个ip.什么场合增加ip别名能派上用场?布网需要.多ip访问测试.特定软件对多ip的需要...and so on. ...

  2. Emacs中Golang的设置

    欲善其事,先利其器.下面记录一些使用Emacs24做golang开发中的一些有用设置,备忘用. 一,golang中的代码跳转 emacs24的go-mode中默认用godef-describe,god ...

  3. fileUpload(草稿)

    Java关于文件上传的一个例子 发表于2012/6/7 13:01:56  1374人阅读 分类: JavaWeb 文件上传不能用get方式提交,因为他提交的数据量最多只有1kb, IE浏览器默认情况 ...

  4. hibernate联合主键注解方式

    方法一:主键类用@Embeddable,pojo类仍然用@Entity但是引用主键类的对象用@Id 主键pojo类: @Embeddable public class composeIdPK impl ...

  5. 用ElasticSearch存储日志

    介绍 如果你使用elasticsearch来存储你的日志,本文给你提供一些做法和建议. 如果你想从多台主机向elasticsearch汇集日志,你有以下多种选择: Graylog2 安装在一台中心机上 ...

  6. JAVA操作mysql

    所需jar包:mysql-connector-java.jar 代码: import java.sql.*; import java.util.ArrayList; import java.util. ...

  7. linux达人养成计划学习笔记（二）—— 文件查找命令

    一.locate命令 1.命令格式: locate 文件名 2.locate在后台数据库中按文件名搜索,速度快,locate命令所搜索的后台数据库 /var/lib/mlocate 3.后台数据库跟新 ...

  8. IIS的应用程序池优化方法

    IIS应用程序池优化方案 服务器经常产生“应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制.进程 ID 是 '3504'.”的错误,导致iis处于假死状态,经了解是IIS ...

  9. 【Struts2】如何查看Struts2框架的源码

    学习三大框架时难免遇到不太理解的地方需要去研究框架源码,这里总结一下查看struts2源码的两种方式. 1.直接解压struts2.X.X-all.zip,在的到的解压文件中看到如下目录: 打开图中蓝 ...

  10. Android的API版本和名称对应关系

    Android版本名和API Level关系全称 Android的版本 Android版本名称Code name Android的API level Android 1.0 (API level 1) ...