zoukankan      html  css  js  c++  java

  • 【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. +'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";

    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;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;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;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
  • 相关阅读:
    JVM常量池
    Java内存分配之堆、栈和常量池
    Visual studio code快捷键
    spring 注解方式配置Bean
    Spring注解@Qualifier
    编程问题总结
    七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
    七天学会ASP.NET MVC (六)——线程问题、异常处理、自定义URL
    七天学会ASP.NET MVC (四)——用户授权认证问题
    七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理
  • 原文地址：https://www.cnblogs.com/lcw/p/3159435.html
Copyright © 2011-2022 走看看