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

时间：2023-02-05 19:49:12

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>


标签：

相关文章