【CODE】DOM、Jquery、D3.js字体放大缩小效果

最新推荐文章于 2022-08-29 07:33:45 发布

DaveLeeCN

最新推荐文章于 2022-08-29 07:33:45 发布

阅读量4k

点赞数

分类专栏： D3 Codes

本文链接：https://blog.csdn.net/DaveLeeCN/article/details/48523429

版权

D3 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Codes

2 篇文章 0 订阅

订阅专栏

Dom方式的话，比较复杂一点，首先需要计算文字变换的范围，然后设置setInterval函数，变换结束时更需要clearInterval，代码如下：

function getFontsize(start, end, step){
	var fontsizelist = [];
	for(var t=start; t<=end; t+=step){
		fontsizelist.push(t);
	}
	for(var o=end-step; o>=start; o-=step){
		fontsizelist.push(o);
	}
	return fontsizelist;
}
var i = 0;
var sizerange = getFontsize(16, 50, 1);
function changeSize(){
	document.getElementById("div1").style.fontSize = sizerange[i]+"px";
	i++;
	if(i>sizerange.length)
		clearInterval(thread1);
		return false;
}
var thread1 = setInterval(changeSize, 20);

jquery因为有animate函数，所以非常简单，不过需要注意，这里不能用px来设置文字大小，否则会没有效果，代码如下：

$(document).ready(function(){
	// 注意，这里如果使用像素定义字体大小的话，无效。
	$("#div1").animate({fontSize:"3em"});
	$("#div1").animate({fontSize:"1em"});
});

现在d3.js很流行，所以也谢了一个，d3的动画需要用transition()和duration()配合使用，代码如下：

d3.select("#div1")
   	.transition()
    .duration(1000)
	.style("font-size", "50px")
   	.transition()
    .duration(1000)
    .style("font-size", "16px");

整体页面代码如下，注意修改jquery和d3的路径：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体放大缩小效果</title>
<style type="text/css">
#div1{
	width: 500px;
	height: 300px;
	line-height: 300px;
	text-align: center;
	font-size: 16px;
}
</style>
</head>
<body>
<div id="div1">字体放大缩小效果</div>

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script src="../js/d3.js"></script>
<script type="text/javascript">
"use strict";
/* D3.js
d3.select("#div1")
   	.transition()
    .duration(1000)
	.style("font-size", "50px")
   	.transition()
    .duration(1000)
    .style("font-size", "16px"); 
*/

/* Dom
function getFontsize(start, end, step){
	var fontsizelist = [];
	for(var t=start; t<=end; t+=step){
		fontsizelist.push(t);
	}
	for(var o=end-step; o>=start; o-=step){
		fontsizelist.push(o);
	}
	return fontsizelist;
}
var i = 0;
var sizerange = getFontsize(16, 50, 1);
function changeSize(){
	document.getElementById("div1").style.fontSize = sizerange[i]+"px";
	i++;
	if(i>sizerange.length)
		clearInterval(thread1);
		return false;
}
var thread1 = setInterval(changeSize, 20);
*/

$(document).ready(function(){
	// 注意，这里如果使用像素定义字体大小的话，无效。
	$("#div1").animate({fontSize:"3em"});
	$("#div1").animate({fontSize:"1em"});
});

</script>
</body>
</html>