【web技术】html特效代码（二）
图片漂浮广告代码
<bodybgcolor="#F7F7F7">
<!--图片漂浮广告代码开始-->
<divid="www_qpsh_com"style="position:absolute">
<!--链接地址--><ahref="www.baidu.com"_fcksavedurl="/"target="_blank">
<!--图片地址--><imgsrc="http://www.baidu.com"_fcksavedurl="http://www.dabaoku.com/images/logo.gif"border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("www_qpsh_com")
function floatwww_qpsh_com() {
var L=T=0
//by www.qpsh.com
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
xx = x + step*(xin?1:-1)
if (x <L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
yy = y + step*(yin?1:-1)
if (y <T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatwww_qpsh_com()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}
</script>
<!--图片漂浮广告代码结束-->
</body>
围绕鼠标的立体旋转文字
<html>
<head>
<title>围绕鼠标的立体旋转文字</title>
<metacontent="text/html; charset=gb2312"http-equiv="Content-Type">
<metacontent="Microsoft FrontPage 5.0"name="GENERATOR">
</head>
<body>
<scriptLANGUAGE="JavaScript">
<!-- Begin
if (document.all) {
yourLogo = "百家联盟欢迎你"; //Not less than 2 letters!
logoFont = "Arial";
logoColor = "ff0000";
//Nothing needs altering below!
yourLogoyourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.09;
currStep = 0;
document.write('<divid="outer"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i = 0; i <L; i++) {
document.write('<divid="ie"style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i <L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] <5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
// End -->
</script>
</body>
</html>
文本特效-打字效果的网站公告
<html>
<head>
<title>网页特效-文本特效-打字效果的网站公告</title>
<FCK:metahttp-equiv="content-Type"content="text/html;charset=gb2312"/>
<body>
<!--把下面代码加到<body>与</body>之间-->
百晓生说明：<aid="HotNews"href=""_fcksavedurl=""target="_blank"></a>
<scriptlanguage="javascript">
<!--
var NewsTime = 2000;//每条新闻的停留时间
var TextTime = 50; //新闻标题文字出现等待时间，越小越快
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
var newnewstitle = new Array();//新闻标题
var newnewshref = new Array(); //新闻链接
newstitle[0] = "关于百晓生，大家都比较熟的了、呵呵，如果有想了解的就直接去我的暂住小站哈，http://infodown.tap.cn，欢迎来访，欢迎留言";
newshref[0] = "http://infodown.tap.cn";
function shownew()
{
var endstr = "_"
hwnewstr = newstitle[newsi];
newslink = newshref[newsi];
if(txti==(hwnewstr.length-1)){endstr="";}
if(txti>=hwnewstr.length){
clearInterval(txttimer);
clearInterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi = 0
}
newstimer = setInterval("shownew()",NewsTime);
txti = 0;
return;
}
clearInterval(txttimer);
document.getElementById("HotNews").href=newslink;
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer = setInterval("shownew()",TextTime);
}
shownew();
//-->
</script>
</body>
</html>
无法屏蔽的网页右下角浮动窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无法屏蔽的网页右下角浮动窗口</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<styletype="text/css">
#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;}
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index: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;}
.icos a:hover{color:#fff;}
#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;}
#msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;}
</style>
</head>
<body>
<pstyle="height:1000px;"></p>
<divid="msg_win"style="display:block;top:490px;visibility:visible;opacity:1;">
<divclass="icos"><aid="msg_min"title="最小化"href="void 0"< /span>>_</a><aid="msg_close"title="关闭"href="void 0"< /span>>×</a></div>
<divid="msg_title">网页制作大宝库</div>
<divid="msg_content">网页制作大宝库dabaoku.com</div>
</div>
<scriptlanguage="javascript">
var Message={
set: function() {//最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
thisthis.win.style.top = this.getY().top;
},
close: function() {//关闭
this.win.style.display = 'none';
window.onscroll = null;
},
setOpacity: function(x) {//设置透明度
var v = x>= 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
},
show: function() {//渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function() {
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) {clearInterval(me.timer2) }
},10);
},
fx: function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) > 0 ? "floor": "ceil"],cc = c || 0.1;
return function() {return [a += cMath((b - a) * c), a - b]}
},
getY: function() {//计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
},
moveTo: function(y) {//移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function() {
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0) {
clearInterval(me.timer);
me.bind();
}
},10);
},
bind:function (){//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function() {
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function() {
meme.win.style.top = me.getY().top;
me.show();
},600);
};
window.onresize = function (){
clearTimeout(rt);
rt = setTimeout(function() {meme.win.style.top = me.getY().top},100);
}
},
init: function() {//创建HTML
function $(id) {return document.getElementById(id)};
this.win=$('msg_win');
var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
for (var Id in set) {this[Id] = $(set[Id])};
var me = this;
this.minbtn.onclick = function() {me.set();this.blur()};
this.closebtn.onclick = function() {me.close()};
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
thisthis.minbtn.innerHTML=this.char[0];
thisthis.closebtn.innerHTML=this.char[2];
setTimeout(function() {//初始化最先位置
me.win.style.display = 'block';
meme.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
},0);
return this;
}
};
Message.init();
</script>
</body>
</html>
本文出自 “成鹏致远” 博客，请务必保留此出处http://infohacker.blog.51cto.com/6751239/1171465
【web技术】html特效代码（二）的更多相关文章
- Java Web技术总结（目录）
来源于:http://www.jianshu.com/p/539bdb7d6cfa Java Web技术经验总结(一) Java Web技术经验总结(二) Java Web技术经验总结(三) Java ...
- 【web技术】html特效代码（一）
小续 还记得当初和八哥一起制作百家成员chm电子书的时候,各种特效啊,这里收集了一些个人比较喜欢的html特效,看个人喜欢了,不喜勿喷啊 html特效代码(一) html特效代码(二) 3D相册代码 ...
- GraalVM最佳实践，使用Java开发CLI、Desktop(JavaFX)、Web(SpringBoot)项目，并使用native-image技术把Java代码静态编译为独立可执行文件（本机映像）
原创文章,转载请注明出处! 源码地址: Gitee Gtihub 介绍 GraalVM最佳实践,使用Java开发CLI.Desktop(JavaFX).Web(SpringBoot)项目,并使用nat ...
- ASP.NET Web API 控制器创建过程(二)
ASP.NET Web API 控制器创建过程(二) 前言 本来这篇随笔应该是在上周就该写出来发布的,由于身体跟不上节奏感冒发烧有心无力,这种天气感冒发烧生不如死,也真正的体会到了什么叫病来如山倒,病 ...
- IIS7.5使用web.config设置伪静态的二种方法
转自 网上赚钱自学网 .http://www.whosmall.com/post/121 近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两 ...
- 深入分析Java Web技术内幕（修订版）
阿里巴巴集团技术丛书 深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波 著 ISBN 978-7-121- ...
- HTML5 Dashboard – 那些让你激动的 Web 技术
HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...
- JavaScript的角色巨变和Web技术的发展
曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它. JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证. 最初职业程序员轻视JavaScript ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
随机推荐
- Easyui入门视频教程 第10集---Messager的使用
Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...
- centos7 修改中文字符集 How to avoid having to `export LC_ALL=“zh_CN.UTF-8”` upon each SSH connection
Each time I SSH to my Fedora Server, the locale setting is not right. $ locale locale: Cannot set LC ...
- ios中非ARC项目中引用ARC文件
下图即可 选中工程->TARGETS->相应的target然后选中右侧的“Build Phases”,向下就找到“Compile Sources”了.如何在未使用arc的工程中引入一个使用 ...
- js中的getBoundingClientRect()函数
在Chrome上,此函数返回结果包含x,y,它们的取值对应于left,top.但是x,y这种表示方式非常不直观(需要先理解x轴和y轴的方向),而left,top则清晰无歧义地表达了元素的位置.正是因此 ...
- Hibernate+maven+eclipse 实现自动建表
一.需求 如题,当建好Model 时,不想自己手工建表,可以采取hibernate进行自动建表.下面将用一个小例子来说明如何将其实现. 二.实现 说明:1)这里用的是4.3.1.Final版本的hib ...
- class-dump在osx 10.11以后安装方法
当Mac升级了OSX 10.11后,配置class-dump的时候,会发现逆向书上推荐的class-dump存放目录/usr/bin,class-dump存放不进去,尝试过用sudo 还是不被允许 ...
- 《JAVA与模式》之模板模式(转载)
模板方法在servlet中的应用:http://www.cnblogs.com/java-my-life/archive/2012/05/14/2495235.html 原文出处:http://blo ...
- PreparedStatement的用法及优点
jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发者付出大量的时间和精力.在使用statem ...
- CListCtrl选中某行
原文链接: http://blog.csdn.net/wxq1987525/article/details/7461461 1.设置CListCtrl选中行 m_list.SetItemState( ...
- MFC动态按钮的创建及其消息响应 和 自定义消息
原文链接: http://www.cnblogs.com/gaohongchen01/p/4046525.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC ...