js,javascript 动态球型云标签

效果图:

html代码:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base target="_blank"> <title>tags</title> </head> <body> <div id="tagsList"> <span><a href="http://www.9958.pw">快递查询</a></span> <span><a href="http://www.9958.pw">火车票查询</a></span> <span><a href="http://www.9958.pw">机票</a></span> <span><a href="http://www.9958.pw">手机号</a></span> <span><a href="http://www.9958.pw">公交查询</a></span> <span><a href="http://www.9958.pw">身份证</a></span> <span><a href="http://www.9958.pw">天气预报</a></span> <span><a href="http://www.9958.pw">在线翻译</a></span> <span><a href="http://www.9958.pw">交通违章</a></span> <span><a href="http://www.9958.pw">IP地址</a></span> <span><a href="http://www.9958.pw">万年历</a></span> <span><a href="http://www.9958.pw">周公解梦</a></span> <span><a href="http://www.9958.pw">网页QQ</a></span> <span><a href="http://www.9958.pw">百度输入法</a></span> <span><a href="http://www.9958.pw">千千静听</a></span> <span><a href="http://www.9958.pw">魔兽世界</a></span> <span><a href="http://www.9958.pw">梦幻西游</a></span> <span><a href="http://www.9958.pw">洛克王国</a></span> <span><a href="http://www.9958.pw">DNF</a></span> <span><a href="http://www.9958.pw">DOTA</a></span> <span><a href="http://www.9958.pw">CF</a></span> <span><a href="http://www.9958.pw">单机游戏</a></span> <span><a href="http://www.9958.pw">小游戏</a></span> <span><a href="http://www.9958.pw">QQ飞车</a></span> <span><a href="http://www.9958.pw">植物大战僵尸</a></span> <span><a href="http://www.9958.pw">连连看</a></span> <span><a href="http://www.9958.pw">斗地主</a></span> <span><a href="http://www.9958.pw">合金弹头</a></span> <span><a href="http://www.9958.pw">保卫萝卜</a></span> <span><a href="http://www.9958.pw">玫瑰小镇</a></span> </div> <script type="text/javascript" src="./tag.js" ></script> </body> </html> <style>body{background:#24313d; padding:0;} #tagsList {position:relative; width:600px; height:600px; margin: -50px auto; background:#24313d;} #tagsList a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; } #tagsList a:hover { color:#FF0000; letter-spacing:2px;}</style> <script>;(function(){ var radius = 120; var dtr = Math.PI/180; var d=300; var mcList = []; var active = false; var lasta = 1; var lastb = 1; var distr = true; var tspeed=10; var size=250; var mouseX=0; var mouseY=0; var howElliptical=1; var aA=null; var oDiv=null; window.onload=function () { var i=0; var oTag=null; oDiv=document.getElementById('tagsList'); aA=oDiv.getElementsByTagName('a'); for(i=0;i<aA.length;i++) { oTag={}; oTag.offsetWidth=aA[i].offsetWidth; oTag.offsetHeight=aA[i].offsetHeight; mcList.push(oTag); } sineCosine( 0,0,0 ); positionAll(); oDiv.onmouseover=function () { active=true; }; oDiv.onmouseout=function () { active=false; }; oDiv.onmousemove=function (ev) { var oEvent=window.event || ev; mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2); mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2); mouseX/=5; mouseY/=5; }; setInterval(update, 30); }; function update() { var a; var b; if(active) { a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed; b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed; } else { a = lasta * 0.98; b = lastb * 
   
    上一篇: js,javascript 中文字符串转Unicode,Unicode转中文字符串
    下一篇: js,javascript判断是否为空
返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册