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

所属分类:其他-动画效果

 8307  155  查看评论 (12)
会跳高的字体插件jquery.beattext.js ie兼容6

使用方法

导入如下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>
相关插件-动画效果

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 10549  58

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 16112  120

svg可爱的变色龙动画

鼠标跟随svg可爱的变色龙动画
  动画效果
 4270  45

蝴蝶3D效果

HTML5制作逼真蝴蝶天空飞舞动画特效
  动画效果
 20215  389

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    阿亮学长 0
    2018/3/29 16:24:42
    兄弟,,扩展文字换成图片那种, 回复
    dsfdsfd 0
    2018/3/27 22:33:29
    我引入到我的项目为啥不好使 回复
    @ 0
    2018/3/8 9:59:09
    想变成ul中li的跳动,怎么办?感觉要改好多
    回复
    北杏 0
    2017/12/23 20:09:37

    请问 这一行代码中 beatText 是这个网页的文件名吗?

    $('p#beatText').beatText({isAuth:false,isRotate:false});
        这个冬天不太冷1
        2018/1/4 14:13:06

        beatText() 这个是插件的方法名,你要改的话就插件里的方法名,#beatText  是dom 节点的id 这个是随便自定义的

    回复
    一撇一捺 0
    2017/12/7 11:13:52

    真的不好玩,也就玩了一个小时。

    回复
    念馨 0
    2017/12/5 13:58:17

    牛逼老哥,哈哈哈

    回复
    橘里 0
    2017/11/21 14:25:29

    我怎么实现不了呢。。。

    回复
    静静地、聆听美好 0
    2017/11/20 10:56:53
    看了文字觉得你很幽默,,,哈哈
        这个冬天不太冷0
        2017/11/21 11:41:34

        你猜错了,其实我是一个内向的人。

    回复
    ☆ smile 。 0
    2017/11/16 18:07:12

    无意间看到这个  也就玩了半小时而已

    回复
    L /kel 0
    2017/11/15 14:07:15
取消回复