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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<title>jQuery.jMagnify.js + HTML5文字突出展示特效</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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.shouce.ren/texiao/">download</a> last version of jquery.js</li>
		<li>
				include the js in the head section of the page:
		<pre>
&lt;head&gt;
...
&lt;script type="text/javascript" src="js/jquery.js" &gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.jMagnify.js" &gt;&lt;/script&gt;
...
&lt;/head&gt;
		</pre>
	</li>
	<li>
	in the read function launch the jMagnify (magnify effect on text) relative at your element:
	<pre>
&lt;script type="text/javascript"&gt;
	$().ready(function() {
		$("#elementId").jMagnify();
	});
&lt;/script&gt;
		</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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

CSS3

描述

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