鼠标响应文字跳动jquery插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标响应文字跳动jquery插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标响应文字自由跳动的jquery插件</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bumpytext.packed.js"></script>
<script type="text/javascript" src="easying.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

$('p#example').bumpyText();

});            //]]>
</script>
</head>
<body id="introduction">
<div id="page">
<div id="container" class="content clearfix">
	<h1 id="logo"></h1>
<p id="example">鼠标移动到文字边上，文字自动跳动</p>
</div>   
</div>
</body>
</html>

JS代码(jquery.bumpytext.packed.js):

/* * bumpyText 1.1 - jQuery plugin for making characters in a text element bumpy. * http://www.alexanderdickson.com/projects/jquery-plugins/bumpytext/ * * Dependicies:jQuery Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/) * * Copyright (c) 2009 Alex Dickson * Licensed under the MIT licenses. * See website for more info. * * Date:2009-08-30 09:03:00 +1000 (Sunday,23 Aug 2009) */
eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(4($){
	$.t.w=4(5){
	2 e={
	h:\'1.x\',n:v,l:u,}
;
	2 5=$.y(e,5);
	d 6.c(4(){
	2 3=$(6);
	z(3.7()!==3.g()){
	d}
;
	2 7=3.7();
	2 a=\'\';
	r(2 i=0;
	i<=7.s;
	i++){
	2 8=7.F(i,i+1);
	a+=($.I(8))?\'<9 H="f-b">\'+8+\'</9>\':8}
3.g(a);
	3.A(\'9.f-b\').c(4(){
	$(6).B(4(){
	$(6).p({
	q:5.h}
,{
	o:j,k:5.n,m:\'C\',D:4(){
	$(6).p({
	q:0}
,{
	o:j,k:5.l,m:\'E\'}
)}
}
)}
)}
)}
)}
}
)(G);
	',45,45,'||var|obj|function|options|this|text|character|span|newMarkup|char|each|return|defaults|bumpy|html|bounceHeight||false|duration|bounceDownDuration|easing|bounceUpDuration|queue|animate|bottom|for|length|fn|700|500|bumpyText|3em|extend|if|find|mouseover|easeOutCubic|complete|easeOutBounce|slice|jQuery|class|trim'.split('|'),0,{
}
))

CSS代码(styles.css):

*{margin:0;padding:0;}
#container{font-size:30px;}
#footer{position:relative;height:70px;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
body{background:#2a2b2d;font:13px/1.3 'Microsoft Yahei','宋体';color:#999;}
#page,#footer_inner{margin:0 auto;width:960px;}
h1#logo{overflow:hidden;height:93px;padding:25px 0;}
h1#logo a{display:block;height:93px;}
#container{margin:0 auto;}
#container h2{font-weight:normal;line-height:28px;}
#container p{padding:10px 0;}
.credit{text-align:center;padding:20px 0 100px;font-size:10px;}
a,a:visited{text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;width:100%;}
#footer h2{font-size:18px;font-weight:normal;height:70px;line-height:70px;font-family:"Microsoft Yahei";color:#eee;}
#footer_inner{position:relative;}
#footer a.tzine,a.tzine:visited{color:#FCFCFC;font-size:12px;line-height:70px;position:absolute;top:0;right:0;width:90px;}
/*-核心代码-*/
/* demo style */
 .bumpy-char{line-height:3.4em;position:relative;}

附件:下载该文件资源,减少时间成本(增值服务)