【web技术】html特效代码（二）

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.  

  21. function shownew()

  22. {

  23. var endstr = "_"

  24. hwnewstr = newstitle[newsi];

  25. newslink = newshref[newsi];

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

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

  28. clearInterval(txttimer);

  29. clearInterval(newstimer);

  30. newsi++;

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

  32. newsi = 0

  33. }

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

  35. txti = 0;

  36. return;

  37. }

  38. clearInterval(txttimer);

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

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

  41. txti++;

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

  43. }

  44. shownew();

  45. //-->

  46. </script>

  47. </body>

  48. </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

posted @ 2013-06-27 17:37  Leo.cheng  阅读(303)  评论(0)  编辑  收藏  举报