<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div><input type="range" min="0" max="100" value="0" style="width:300px;" class="btn"></div>
<div><input type="range" min="0" max="10" value="0" style="width:300px;" class="btn2"></div>
<div class="title" style="width:300px;line-height:24px;margin:0 auto;"><p>文字弯曲效果类似扇形拱桥状</p></div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/circletype.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.lettering.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let space=1,inputVal="";
/*
*弯曲弧度
* */
$(".btn").change(function(){
inputVal=$(this).val();
//设置的值
$(".title").children('p').circleType({
radius:inputVal,//弯曲度数，最小的值是文字长度，如果设置为-1，则显示直线。
dir:1,//:默认1 (1：向下弯曲 非1（-1,0,2等）：向上弯曲 )
zn:space //zn:space这个是加的一个，用来调整间距
});
})
/*
* 字符间距
* */
$(".btn2").change(function(){
space=$(this).val();
$(".title").children('p').circleType({
radius:inputVal,//弯曲度数，最小的值是文字长度，如果设置为-1，则显示直线。
dir:1,//:默认1 (1：向下弯曲 非1（-1,0,2等）：向上弯曲 )
zn:space
});
})
</script>
</body>
</html>
网友评论