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

2024-09-05 12:18:54

字体：大中小

来源：转载

供稿：网友

jQuery.jMagnify.js + HTML5技术实现网页上的文字突出展示特效，把你的鼠标放在文字上面，文字会放大显示，有的是为文字添加了一个方框，鼠标滑过方框出现，有的是为文字添加的底部箭头效果，移动鼠标可看到效果，所使用的jQuery.jMagnify.js已分解到代码中，第一部分JavaScript代码即是。

<!DOCTYPE html><head><title>jQuery.jMagnify.js + HTML5文字突出展示特效</title><script type="text/javascript" src="http://www.vevb.com/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>download jquery.jMagnify.js and images files</li>		<li>download last version of jquery.js</li>		<li>				include the js in the head section of the page:		<pre><head>...<script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="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>

上一篇：HTML5图片旋转

下一篇：超多的CSS3圆角渐变网页按钮