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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
js实现缓动动画
Nov 25 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
window.print打印指定div实例代码
2013/12/13 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python如何实现word批量转HTML
2020/09/30 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
局部内部类是否可以访问非final变量?
2013/04/20 面试题
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
cf收人广告词大全
2014/03/14 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
学校班班通实施方案
2014/06/11 职场文书
班级团队活动方案
2014/08/14 职场文书
怎样写家长意见
2015/06/04 职场文书
感恩教师主题班会
2015/08/12 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python