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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 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
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JS实现六位字符密码输入器功能
2016/08/19 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python实现问号表达式(?)的方法
2013/11/27 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python 求数组局部最大值的实例
2019/11/26 Python
python 爬虫请求模块requests详解
2020/12/04 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
护士检查书
2014/01/17 职场文书
合伙协议书范本
2014/04/21 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
龙门石窟导游词
2015/02/02 职场文书
党员个人自我评价
2015/03/03 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL