JS文字球状放大效果代码分享


Posted in Javascript onAugust 19, 2015

很酷的放大镜放大文字的效果,超赞!

先展示一下效果图:

JS文字球状放大效果代码分享

大家先运行代码试一试-------------------------------------效果演示-------------------------------------------

具体代码如下

<html>
<head>
<title>JS文字球状放大效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
 body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
 span {position:absolute;font-family: verdana; font-weight: bold;}
</style>

<script type="text/javascript"><!--

T = "What is real?How do you define real? Ifyou're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";
I = 0;
o = new Array();
xm = -1000;
ym = -1000;
///////////////
rad = 80;
dim = 200;
///////////////
W = 0;
H = 0;
NX = 14;
NY = 14;
var nx;
var ny;

document.onmousemove = function(e){
 if (window.event) e = window.event;
 xm = (e.x || e.clientX) - (nx * .5) + dim * .5;
 ym = (e.y || e.clientY) - (ny * .5) + dim * .5;
}

function resize() {
 nx = document.body.offsetWidth;
 ny = document.body.offsetHeight;
}
onresize = resize;

function CObj(N,i,j,c){
 this.obj = document.createElement("span");
 this.obj.innerHTML = c;
 DOOT.appendChild(this.obj);
 this.N = N;
 this.To = 16;
 this.x0 = i*2*W;
 this.y0 = j*2*H;
 this.anim = true;

 this.mainloop = function(){
 with (this) {
 dx = xm - x0;
 dy = ym - y0;
 dist = Math.sqrt(dx * dx + dy * dy);
 if (dist < rad) {
 anim = true;
 M = Math.cos(.5 * Math.PI * Math.abs(dist / rad));
 c = Math.round(84 + M * 171);
 with(obj.style){
 left = x0 - dx * M;
 top = y0 - dy * M;
 zIndex = Math.round(100 + M);
 fontSize = 8 + M * W * 2;
 color = "RGB("+c+","+c+","+c+")";
 }
 } else {
 if(anim){
 with(obj.style){
 left = x0;
 top = y0;
 zIndex = 0;
 fontSize = 8;
 color = "RGB(88,88,88)";
 }
 anim = false;
 }
 }
 }
 }
}
function run(){
 for(i in o)o[i].mainloop();
 setTimeout(run,16);
}

onload = function (){
 DOOT = document.getElementById("doot");
 with(DOOT.style){
 left = -dim/2;
 top = -dim/2;
 width = dim;
 height = dim;
 }
 resize();
 W = (dim / NX) / 2;
 H = (dim / NY) / 2;
 K = 0;
 for(var j=0;j<NY;j++){
 for(var i=0;i<NX;i++){
 c=T.charAt((I++)%T.length).toUpperCase();
 if(c==" ")c="·";
 o[K] = new CObj(K++,i,j,c);
 }
 }
 run();
}
//-->
</script>
</head>

<body>
<span style="position:absolute;left:50%;top:50%">
 <span id="doot"></span>
</span>

</body>
</html>

小伙伴们想不想实现这种酷炫的效果,直接复制代码,运行即可,抓紧试试吧,或者是再来点创新。

以上就是为大家分享的JavaScript文字球状放大效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 #Javascript
JavaScript实现表格快速变色效果代码
Aug 19 #Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
JS时间特效最常用的三款
Aug 19 #Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 #Javascript
JS模拟并美化的表单控件完整实例
Aug 19 #Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
You might like
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
寄语十八大感言
2014/02/07 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
青春无悔演讲稿
2014/05/08 职场文书
初中体育教学随笔
2015/08/15 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS