基于jQuery.jMagnify.js的HTML5文字突出展示特效

时间：2013-10-09 09:54 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<title>jQuery.jMagnify.js + HTML5文字突出展示特效</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($)
{
	$.fn.jMagnify = function(o) {
		o = $.extend({
			centralEffect: {'font-size': '200%'},
			lat1Effect: {'font-size': '180%'},
			lat2Effect: {'font-size': '150%'},
			lat3Effect: {'font-size': '120%'},
			resetEffect: {'font-size': '100%'}
		}, o);
		return this.each(function(i) {
			var el = $(this);
			var	uuid = (el.attr('id') || el.attr('class') || 'internalName') + '_jMagnify';
			var myText = "";
			var aStr = el.text().split("");
			for (var len in aStr)
				myText += "<span class='" + uuid + "'>" + aStr[len] + "</span>";
			el.html(myText);
			$('.' + uuid).hover(function(){
					$(this).css(o.centralEffect)
						.next().css(o.lat1Effect)
						.next().css(o.lat2Effect)
						.next().css(o.lat3Effect);
					$(this).prev().css(o.lat1Effect)
						.prev().css(o.lat2Effect)
						.prev().css(o.lat3Effect);
				},
				function() {
					$(this).css(o.resetEffect)
						.next().css(o.resetEffect)
						.next().css(o.resetEffect)
						.next().css(o.resetEffect);
					$(this).prev().css(o.resetEffect)
						.prev().css(o.resetEffect)
						.prev().css(o.resetEffect);
			});
		});
	};
})(jQuery);	
</script>
<script type="text/javascript">
		$().ready(function() {
			$('#first').jMagnify();
			$('#second').jMagnify({
				centralEffect: {'color': 'yellow'},
				lat1Effect: {'color': 'orange'},
				lat2Effect: {'color': 'red'},
				lat3Effect: {'color': 'magenta'},
				resetEffect: {'color': 'black'}
			});
			$('#third').jMagnify({
				centralEffect: {'background-color': '#FFFF00'},
				lat1Effect: {'background-color': '#FFFF44'},
				lat2Effect: {'background-color': '#FFFF88'},
				lat3Effect: {'background-color': '#FFFFCC'},
				resetEffect: {'background-color': 'white'}
			});
			$('#fourth').jMagnify({
				centralEffect: {'border': '4px solid red', 'font-size': '200%'},
				lat1Effect: {},
				lat2Effect: {},
				lat3Effect: {},
				resetEffect: {'border': '0', 'font-size': '100%'}
			});
			$('#double').jMagnify({
				centralEffect: {'border-bottom': '4px solid red'},
				lat1Effect: {'border-bottom': '3px solid red'},
				lat2Effect: {'border-bottom': '2px solid red'},
				lat3Effect: {'border-bottom': '1px solid red'},
				resetEffect: {'border': '0'}
			});
		});
	</script>
</head>
<body>
<h2>jMagnify plugin: documentation and demo page</h2>
<h3 id='h31'>Demo 1 - Standard options</h3>
<p>
	Hover text below to see jMagnify in action!
</p>
<div style='font-size: 26px; height: 100px; color: green; background-color: #FAFAF0;'>
	<p id='first'>
		jQuery jMagnify, magnify effect on text!
	</p>
</div>
<p>
	This is the javascript code to launch jMagnify with standard options:
</p>
<pre>
$().ready(function() {
	$('#first').jMagnify();
});
</pre>
<h3 id='h32'>Demo 2 - jMagnify text color demo (in a A element)</h3>
<p>
	Hover text below to see jMagnify in action!
</p>
<p>
	This is the javascript code to launch jMagnify text color demo:
</p>
<pre>
$().ready(function() {
	$('#second').jMagnify({
		centralEffect: {'color': 'yellow'},
		lat1Effect: {'color': 'orange'},
		lat2Effect: {'color': 'red'},
		lat3Effect: {'color': 'magenta'},
		resetEffect: {'color': 'black'}
	});
});
</pre>
<h3 id='h33'>Demo 3 - jMagnify background-color demo</h3>
<p>
	Hover text below to see jMagnify in action!
</p>
<div id='third'>
	OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
</div>
<p>
	This is the javascript code to launch jMagnify background-color demo:
</p>
<pre>
$().ready(function() {
	$('#third').jMagnify({
		centralEffect: {'background-color': '#FFFF00'},
		lat1Effect: {'background-color': '#FFFF44'},
		lat2Effect: {'background-color': '#FFFF88'},
		lat3Effect: {'background-color': '#FFFFCC'},
		resetEffect: {'background-color': 'white'}
	});
});
</pre>
<h3 id='h34'>Demo 4 - jMagnify character box demo</h3>
<p>
	Hover text below to see jMagnify in action!
</p>
<div style='font-size: 26px; height: 100px; color: green; background-color: #FAFAF0;'>
	<p id='fourth'>
		jQuery jMagnify, magnify effect on text! - Character in a box
	</p>
</div>
<p>
	This is the javascript code to launch jMagnify character box demo:
</p>
<pre>
$().ready(function() {
	$('#fourth').jMagnify({
		centralEffect: {'border': '4px solid red', 'font-size': '200%'},
		lat1Effect: {},
		lat2Effect: {},
		lat3Effect: {},
		resetEffect: {'border': '0', 'font-size': '100%'}
	});
});
</pre>
<h3 id='h35'>Demo 5 - jMagnify border-bottom demo</h3>
<p>
	Hover text below to see jMagnify in action!
</p>
<div id='double' style='font-size: 26px;'>
	jQuery jMagnify, magnify effect on text! - Only border-bottom parameters
</div>
<p>
	This is the javascript code to launch jMagnify border-bottom demo:
</p>
<pre>
$().ready(function() {
	$('#double').jMagnify({
		centralEffect: {'border-bottom': '4px solid red'},
		lat1Effect: {'border-bottom': '3px solid red'},
		lat2Effect: {'border-bottom': '2px solid red'},
		lat3Effect: {'border-bottom': '1px solid red'},
		resetEffect: {'border': '0'}
	});
});
</pre>
<h3>Documentation</h3>
<p>
				To use this jquery plugin:
	<br/>
	<ul>
		<li><a href="#download" title="Download jMagnify (magnify effect on text)">download</a> jquery.jMagnify.js and images files</li>
		<li><a href="http://www.codefans.net/soft/21649.shtml">download</a> last version of jquery.js</li>
		<li>
				include the js in the head section of the page:
		<pre>
<head>
...
<script type="text/javascript" src="http://www.codefans.net/js/jquery.js" ></script>
<script type="text/javascript" src="http://www.codefans.net/js/jquery.jMagnify.js" ></script>
...
</head>
		</pre>
	</li>
	<li>
	in the read function launch the jMagnify (magnify effect on text) relative at your element:
	<pre>
<script type="text/javascript">
	$().ready(function() {
		$("#elementId").jMagnify();
	});
</script>
		</pre>
		</li>
	</ul>
	<h4>Parameters:</h4>
<ul>
<li>centralEffect - effect of central element - default {'font-size': '200%'}</li>
<li>lat1Effect - effect of first element near the central - default {'font-size': '180%'}</li>
<li>lat2Effect - effect of second element near the central - default {'font-size': '150%'}</li>
<li>lat3Effect - effect of third element near the central - default {'font-size': '120%'}</li>
</ul>
</p>
<h3>Release</h3>
<p>
<ul>
<li><strong>0.0</strong> - Mar 23 2010 - First release of jMagnify (magnify effect on text)</li>
</ul>
</p>
</body>
</html>

基于jQuery.jMagnify.js的HTML5文字突出展示特效

网页特效