首页 前端知识 JS特效第103弹:jQuery动态的文字跳动代码

JS特效第103弹:jQuery动态的文字跳动代码

2024-07-01 23:07:56 前端知识 前端哥 921 388 我要收藏

         jQuery文字插件制作鼠标悬停动态的文字跳动效果代码,先来看看效果:

        一部分关键的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自由跳动的字体</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.beattext.js"></script>
<script type="text/javascript" src="js/easying.js"></script>

<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>
<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>
</head>
<body>

<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>

</body>
</html>

        全部代码:jQuery动态的文字跳动代码

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13736.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!