会跳高的字体插件jquery.beattext.js

查看演示立即下载

插件描述：字体特效，会弹跳的字体插件jquery.beattext.js

使用方法

导入如下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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：百度ets动态添加数据
下一个特效： zcity全国城市三级联动插件(原创)