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

小续

还记得当初和八哥一起制作百家成员chm电子书的时候，各种特效啊，这里收集了一些个人比较喜欢的html特效，看个人喜欢了，不喜勿喷啊

html特效代码（一）

html特效代码（二）

3D相册代码

<embed
src="http://flash.picturetrail.com/pflicks/acrobatcube_r.swf"
loop="false"quality="high"
FlashVars="backopacity=100&cubecroptofit=1&enlargecroptofit=0&
logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf
&ptdim=50.10&ptxy=180.16&faceopacity=80
&img1=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244048256.jpg
&img2=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043049.jpg
&img3=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043047.jpg
&img4=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043044.jpg
&img5=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043042.jpg
&img6=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043040.jpg"
wmode="transparent"bgcolor="transparent"
width="180"height="160"
name="acrobatcube"id="acrobatcube"align="middle"allowScriptAccess="sameDomain"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

斗转星移

<html>
<head>
</head>
<body>
<styletype="text/css">
#sDiv0, #sDiv1, #sDiv2, #sDiv3, #sDiv4, #sDiv5, #sDiv6, #sDiv7, #sDiv8, #sDiv9
{
position:absolute; height:1; width:1; font-family:arial black; font-size:9px; color:#FFFFAA; z-index:10;
}
</style>
<bodybgcolor="#000000">
<SCRIPTLANGUAGE="JavaScript1.2">
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && self.innerWidth && (window.pageXOffset>-1));
var allDivs = new Array(10);
var documentWidth,documentHeight;
function initAll(){
if(!ns && !ie && !w3) return;
for(dNum=0; dNum<10; ++dNum){
if(ie) allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else if(ns) allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
else if(w3) allDivs[dNum]=eval('document.getElementById("sDiv'+dNum+'").style');
moveTo(dNum,0,0);
}
}
function moveTo(I,tempx,tempy){
if (ie){
documentdocumentWidth =document.body.offsetWidth+document.body.scrollLeft-20;
randomy=Math.floor(Math.random()*document.body.offsetHeight)+document.body.scrollTop-20;
}
else if (ns){
documentWidth=window.innerWidth+window.pageXOffset-20;
randomy=Math.floor(Math.random()*window.innerHeight)+window.pageYOffset-20;
}
else if (w3){
documentWidth=self.innerWidth+window.pageXOffset-20;
randomy=Math.floor(Math.random()*self.innerHeight)+window.pageYOffset-20;
}
if(tempx>-50){
tempx-=45;
allDivs[I].left=tempx;
allDivs[I].top =tempy;
setTimeout("moveTo("+I+","+tempx+","+tempy+")",40)
}
else
setTimeout("moveTo("+I+",documentWidth-10,randomy)",2000/I+40);
}
window.onload=initAll
</script>
<divid="sDiv0">*</div>
<divid="sDiv1">*</div>
<divid="sDiv2">*</div>
<divid="sDiv3">*</div>
<divid="sDiv4">*</div>
<divid="sDiv5">*</div>
<divid="sDiv6">*</div>
<divid="sDiv7">*</div>
<divid="sDiv8">*</div>
<divid="sDiv9">*</div>
</body>
</html>

全局按钮

复制并粘贴下面的JS代码，放到您的网页，可以在<body>和</body>的之间网页的任意位置放置。如果您的网站使用的模板，您也可以复制代码到您的模板，按钮将在所有网页自动出现。
<divid="bdshare"class="bdshare_t bds_tools get-codes-bdshare">
<spanclass="bds_more">分享到：</span>
<aclass="bds_qzone"></a>
<aclass="bds_tsina"></a>
<aclass="bds_tqq"></a>
<aclass="bds_renren"></a>
<aclass="shareCount"></a>
</div>
<scripttype="text/javascript"id="bdshare_js"data="type=tools"></script>
<scripttype="text/javascript"id="bdshell_js"></script>
<scripttype="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>

舞台特效

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title></title>
</head>
<bodylink="#FF00FF">
<bodybgcolor="#000000"link="#FF00FF">
<divid="myLightObject"style="position: relative; height: 100px; width: 400px; top: 10px; left: 10px;
color: White; filter: light">
<palign="center">
<fontsize="6"><ahref="http://www.chinaz.com/">百晓生而已、呵呵
</a></font>
</div>
百晓生说明：<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>
<scriptlanguage="VBScript">
Option Explicit
sub window_OnLoad()
call myLightObject.filters.light(0).addambient(0,0,255,30)
call myLightObject.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10)
end sub
sub document_onMouseMove()
call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)
end sub
</script>
</body>
</html>

星星飞舞

<html>
<head>
</head>
<body>
<SCRIPTLANGUAGE="JavaScript1.2">
var intervals=2000
var sparksOn = true;
var speed = 40;
var power = 3;
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var ns6=(document.getElementById&&!document.all);
var sparksAflyin = false;
var allDivs = new Array(10);
var totalSparks = 0;
function initAll(){
if(!ns && !ie &&!ns6){
sparksOn = false;
return;
}
setInterval("firework()",intervals)
if (ns)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
for(dNum=0; dNum<7; ++dNum){
if(ie)
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else if (ns6)
allDivs[dNum]=document.getElementById('sDiv'+dNum).style;
else
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
}
}
function firework(){
if (ie){
documentdocumentWidth=document.body.clientWidth
documentdocumentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns||ns6){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset
}
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
if(sparksOn){
if(!sparksAflyin){
sparksAflyin=true;
totalSparks=0;
for(var spark=0;spark<=6;spark++){
dx=Math.round(Math.random()*50);
dy=Math.round(Math.random()*50);
moveTo(spark,randomx,randomy,dx,dy);
}
}
}
}
function moveTo(I,tempx,tempy,dx,dy){
if(ie){
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
tempy=document.body.offsetHeight+document.body.scrollTop-80;
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
tempx=document.body.offsetWidth+document.body.scrollLeft-80;
}
else if(ns6){
if(tempy+80>(window.innerHeight+pageYOffset))
tempy=window.innerHeight+pageYOffset-80;
if(tempx+80>(window.innerWidth+pageXOffset))
tempx=window.innerWidth+pageXOffset-80;
}
if(tempx>-50&&tempy>-50){
tempx+=dx;tempy+=dy;
allDivs[I].left=tempx;
allDivs[I].top=tempy;
dx-=power;dy-=power;
setTimeout("moveTo("+I+","+tempx+","+tempy+","+dx+","+dy+")",speed)
}
else
++totalSparks
if(totalSparks==7){
sparksAflyin=false;
totalSparks=0;
}
}
window.onload=initAll
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}
</style>
<bodybgcolor="#000000">
<divid="sDiv0">*</div>
<divid="sDiv1">*</div>
<divid="sDiv2">*</div>
<divid="sDiv3">*</div>
<divid="sDiv4">*</div>
<divid="sDiv5">*</div>
<divid="sDiv6">*</div>
</body>
</html>

跟随鼠标的日期时间表盘

<html>
<head>
<title>跟随鼠标的日期时间表盘</title>
</head><BODY>
<SCRIPTlanguage=JavaScript>
<!--
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year <2000) yearyear=year+1900;
TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;
D=TodaysDate.split('');
H='...';
HH=H.split('');
M='....';
MM=M.split('');
S='.....';
SS=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
FaceFace=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+"color="+fCol+">";
props2="<font face="+font+" size="+size+"color="+dCol+">";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i <n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i <D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i <D.length; i++)
document.write('<layername="nsDate'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i <n; i++)
document.write('<layername="nsFace'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i <S.length; i++)
document.write('<layername=nsSeconds'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i <M.length; i++)
document.write('<layername=nsMinutes'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i <H.length; i++)
document.write('<layername=nsHours'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<divid="Od"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i=0; i <D.length; i++)
document.write('<divid="ieDate"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');
document.write('</div></div>');
document.write('<divid="Of"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i=0; i <n; i++)
document.write('<divid="ieFace"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');
document.write('</div></div>');
document.write('<divid="Oh"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i=0; i <H.length; i++)
document.write('<divid="ieHours"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<divid="Om"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i=0; i <M.length; i++)
document.write('<divid="ieMinutes"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<divid="Os"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');
for (i=0; i <S.length; i++)
document.write('<divid="ieSeconds"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i <n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i <H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i <M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i <S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i <D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i <D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i <n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',40);
}
if (ns||ie)window.onload=Delay;
//-->
</SCRIPT>
</body></html>

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

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

【web技术】html特效代码（二）
html特效代码(一) html特效代码(二) 图片漂浮广告代码 <bodybgcolor="#F7F7F7">  < ...
GraalVM最佳实践，使用Java开发CLI、Desktop(JavaFX)、Web(SpringBoot)项目，并使用native-image技术把Java代码静态编译为独立可执行文件（本机映像）
原创文章,转载请注明出处! 源码地址: Gitee Gtihub 介绍 GraalVM最佳实践,使用Java开发CLI.Desktop(JavaFX).Web(SpringBoot)项目,并使用nat ...
深入分析Java Web技术内幕（修订版）
阿里巴巴集团技术丛书深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波著 ISBN 978-7-121- ...
HTML5 Dashboard – 那些让你激动的 Web 技术
HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...
JavaScript的角色巨变和Web技术的发展
曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它. JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证. 最初职业程序员轻视JavaScript ...
用web技术开发出原生的App应用的体会（1）
本人是是个前端小白,学前端已经有半年的时间了,前几天开了个博客,希望记录自己学习历程的点滴. 今天要写的是关于用html,css,javascript等web技术开发原生的app应用. 总所周知,we ...
基于JAVA WEB技术旅游服务网站系统设计与实现网上程序代写
基于JAVA WEB技术旅游服务网站系统设计与实现网上程序代写专业程序代写服务(QQ:928900200) 随着社会的进步.服务行业的服务水平不断发展与提高,宾馆.酒店.旅游等服务行业的信息量和工作 ...
Web技术的发展网络发展简介（三）
在上一篇文章中,对TCP/IP通信协议进行了简单的介绍通信协议是通信的理论基石,计算机.操作系统以及各种网络设备对通信的支持是计算机网络通信的物质基础而web服务则是运行于应用层,借助于应用层的协 ...
web技术栈中不可或缺的Linux技术
Web技术最重要的载体便是服务器,服务器运行在公共的网络环境下,为广大的用户提供网页浏览.信息通讯.消息推送等服务,从最开始的硬件服务器到虚拟主机技术,再到虚拟化技术的出现和云概念的兴起,绝大部分都是 ...

随机推荐

org.hibernate.NonUniqueObjectException: a different object with the same identifier value was already associated with the session:
保存实体异常 https://blog.csdn.net/zzzz3621/article/details/9776539 org.hibernate.NonUniqueObjectException ...
coreData详解
1.初识CoreData CoreData的结构构成: NSManagedObjectModel的构成: 可以通过Entity创建继承自NSManagedObject类的文件,这个文件就是开发中使用的 ...
fedora装机运行第一脚本
博主原创: #!/bin/bash echo "更换源&更新源......" yum install wget -y yum install yum-fastestmirr ...
RabbitMQ.Client API (.NET)中文文档
主要的名称空间,接口和类核心API中定义接口和类 RabbitMQ.Client 名称空间: 1 using RabbitMQ.Client; 核心API接口和类 IModel :表示一个AMQP ...
IIS的应用程序池优化方法
IIS应用程序池优化方案服务器经常产生“应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制.进程 ID 是 '3504'.”的错误,导致iis处于假死状态,经了解是IIS ...
SharePoint 2013 Backup Farm Automatically With a Powershell and Windows Task Schedule
In this post,I will show you SharePoint 2013 How to Backup Farm Automatically with a PowerShell and ...
PostgreSQL创建数据库用户
注:版本不同,命令的执行路径可能有些不同. 一. 创建数据库用户freeswitch sudo -u postgres /usr/pgsql-9.5/bin/createuser -s -e free ...
Redis命令汇总
设置服务后台启动 cd /usr/local/redisview redis.conf 将daemonize no改为 daemonize yes保存退出启动:./reids-server redi ...
[转]使用spring中的@Transactional注解时，可能需要注意的地方
前情提要在编写业务层方法时,会遇到很多需要事务提交的操作,spring框架为我们提供很方便的做法,就是在需要事务提交的方法上添加@Transactional注解,比起我们自己开启事务.提交以及控制回 ...
怎么安装预装的win8三星笔记本改win7再装Ubuntu问题[zz]
随着科技的高速发展,人们对电脑的要求越来越高,对电脑系统的要求亦是,那些电脑自带的系统,很多时候已经无法满足人们的需求了,而为了满足自己的需求,人们往往会为电脑改装新系统,而本文要和大家一起分享的话题 ...

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

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

随机推荐

热门专题