效果图：
描述说明：
使用方法
导入如下3个js文件
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.beattext.js"></script> <script type="text/javascript" src="easying.js"></script>
HTML 代码如下：
<div class="container"> <p id="beatText">我可是会跳的哦，但看我跳，你要把鼠标移上来。</p> <p id="rotateText">我是旋转字体的，你鼠标移上来看看</p> <br> <br> <p id="autoText">看我跳是不收钱的，免费看，上面两基佬都是鼠标移才动真懒</p> <p id="roloadText">正在加载中...</p> <br> <br> <p id="autoRotateText">我是刷杂技的，边跳边翻跟头..............</p> </div>
CSS样式如下：最后两个才是重要的
<style>
*{
padding:0px;
margin:0px;
background:#333;
color:#fff;
font-size:30px;
}
.container{
margin:50px auto;
width:1100px;
position:relative;
}
.container p{
text-align:center;
padding:10px auto;
}
/*下面两个是核心样式*/
.beat-char {
line-height: 3.4em;
position: relative;
display: inline-block;
background: transparent;
}
.rotate{
transform:rotate(360deg) ;
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg);
-webkit-transition-duration: 0.7s;
}
</style>调用方式如下：
<script type="text/javascript">
$(document).ready(function() {
/*
* 参数详解:
* upTime 上移的时间
* downTime 下落的时间
* beatHeight 上移高度
* isAuth 是否自动
* isRotate 是否旋转
*/
$('p#beatText').beatText({isAuth:false,isRotate:false});
$('p#rotateText').beatText({isAuth:false,isRotate:true});
$('p#autoText').beatText({isAuth:true,beatHeight:"3em",isRotate:false});
$('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
$('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});
});
</script>转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/459.html
