Welcome, Old Sport!

覆盖文章内容的效果 CSS & jQuery

by ilikecss ON 2011/02/17 10723

今天将使用jQuery覆盖效果,使能够更突出你想要突出的文章内容,或者让浏览者更容易的浏览到想要的文章内容。其实这个效果制作很简单,改变元素的透明度,设定元素ID等等,使用者很方便能随意让自己文章某些区域变得醒目。

Step1. 创建HTML

<div class="content">
    <h1 id="TTL1" class="effect-1">I sink under the weight</h3>
    <p class="effect-1">teiend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions!</p>

    <p class="effect-1">A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>

    <p class="effect-1">I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>

    <p class="effect-1">I am so happy, my dear friend.</p>
</div>

Step2. 创建CSS

*{
	margin: 0;
	padding: 0;
}
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background: #333;
	color: #fff;
	text-shadow:1px 1px 1px #000;
}
.header{
	width: 100%;
	height: 35px;
	clear:both;
	background: #000 url(../images/stripe.gif) repeat top left;
	border-bottom: 7px solid #222;
	font-size: 11px;
	line-height: 35px;
	font-style: italic;
	text-align: center;
}
.header a{
	color: #aaa;
	text-shadow: 1px 1px 1px #000;
	padding-right: 20px;
}
.header a:hover{
	color: #fff;
}
.container {
	width: 100%;
	height: 100%; /* IE6: treaded as min-height*/
	margin: 0 auto; /* center, not in IE5 */
	height: auto !important; /* real browsers */
	min-height: 100%; /* real browsers */
}
.left{
	float: left;
	margin-left: 10px;
}
.back{
	right: 0;
}
h1, h3{
	font-size: 56px;
	color: #5eb1e0;
	font-weight: normal;
}
h3{
	font-size:20px;
	padding:10px;
}
h2{
	font-size: 26px;
	font-weight: normal;
	color: #aaa;
	padding: 10px;
}
a{
	color: #777;
	text-decoration: none;
}
p{
	padding: 10px;
	color: #ccc;
	text-shadow: none;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: justify;
}
.content{
	width: 500px;
	padding: 40px 40px 80px 40px;
	background: #222;
	margin-left: 80px;
	position: relative;
}
ul.menu{
	width: 54px;
	height: 270px;
	list-style: none;
	position: fixed;
	left: 660px;
	top: 42px;
}
ul.menu li{
	display: block;
}
ul.menu li a{
	width: 30px;
	height: 30px;
	background: #555;
	display: block;
	padding: 10px;
	line-height: 30px;
	outline: none;
	border: 2px solid #333;
	text-align: center;
}
ul.menu li a:hover{
	background: #fff;
}
ul.menu li a img{
	border: none;
}
.footer {
	position:absolute;
	width:100%;
	height:50px;
	line-height:50px;
	bottom:0; /* stick to bottom */
	background:#f0f0f0;
	border-top:7px solid #222;
	text-align:center;
	text-shadow:1px 1px 1px #000;
	color:#fff;
	background:#000 url(../images/stripe.gif) repeat top left;
}
.footer a{
	color:#aaa;
	padding:0px 10px;
	text-shadow:1px 1px 1px #000;
}
.footer a:hover{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
}

Step3. 插入jQuery和脚本包

$(function() {
/*
the menu list element,
the container and content divs
*/
var $menu			= $('#menu'),
	$container		= $('#container'),
	$content		= $container.find('.content');

/*
lets add the classes effect, e-fade, and e-color to some elements.
e-fade : this will decrease the opacity of the element
e-color: this will change the color of the element
*/		
$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');
	
/*
elems is all the elements with class effect.
overlayEffect is our function / module that will take care of the animations
*/	
var $elems			= $(document).find('.effect'),
	OverlayEffect 	= (function(){
			//speed for animations
		var speed				= 1000,
			//the event that triggers the effect
			eventOff			= 'mouseenter',
			//the event that stops the effect
			eventOn				= 'mouseleave',
			//this is the color that the elements will have after eventOff
			colorOff			= '#AAAAAA',
			//saves the original color of each e-color element,
			//and calls the methos to initialize the events
			init				= function() {
				$elems.each(function(){
					var $el		= $(this);
					if($el.hasClass('e-color'))	
						$el.data('original-color',$el.css('color'));
				});
				initEventsHandler();
			},
			//initializes the events eventOff / eventOn
			initEventsHandler 	= function() {
				$menu
				.delegate('a',eventOff,function(e){
					//relation is the id of the element, 
					//and the class of related elements
					var relation	= $(this).attr('id');
					animateElems('off',relation);
					return false;
				})
				.delegate('a',eventOn,function(e){
					var relation	= $(this).attr('id');
					animateElems('on',relation);
					return false;
				});	
			},
			//animates the color and / or opacity
			animateElems		= function(dir,relation) {
				var $e	= $elems;
				
				switch(dir){
					case 'on'	:
						//if there are elements on the page with class = relation
						//then these elements will be excluded for the animation
						if(relation)
							$e	= $elems.not('.' relation);
						
						$e.each(function(){
							var $el		= $(this),
								color	= $el.data('original-color'),
								param	= {};
							
							if($el.hasClass('e-color'))
								param.color		= color;
							if($el.hasClass('e-fade'))
								param.opacity	= 1;

							$el.stop().animate(param,speed);	
						});
						
						break;
					case 'off'	:
						if(relation)
							$e	= $elems.not('.' relation);
						
						$e.each(function(){
							var $el		= $(this),
								param	= {};
							
							if($el.hasClass('e-color'))
								param.color		= colorOff;
							if($el.hasClass('e-fade'))
								param.opacity	= 0.1;

							$el.stop().animate(param,speed);	
						});
						
						break;
				}
			};
			
		return {
			init				: init
		};
	})();
	
/*
call the init method of OverlayEffect
*/
OverlayEffect.init();
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
1条评论
  1. 好东西~~~收藏




TOP