沪江英语网3图弹性广告展示轮播滚动切换特效代码

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

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

以下是沪江英语网3图弹性广告展示轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" />
<meta content="程序员设计师联盟淘宝店" name="keywords" />
<script type="text/javascript" src="js/mootools_packed.js"></script>
<script type="text/javascript" src="js/site.js"></script>
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为沪江英语网3图弹性广告展示" />
<title>沪江英语网3图弹性广告展示</title>
<style>
#liquid {
	padding: 0px;
	overflow: hidden;
	width: 550px;
}

#liquid .liquids {
	display: block;
	background: #FFF url(images/right.gif) top right no-repeat;
	height: 125px;
}

#liquid ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#liquid li {
	float: left;
}

#liquid .liquid {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 125px;
	width: 178px;
	background: #fff;
	border-right: 5px solid #FFF;
}

#liquid .liquid span {
	position: absolute;
	left: -999px;
	width: 990px;
}

#liquid .web {
	background: #FFF url(images/bbs.gif);
}

#liquid .print {
	background: #FFF url(images/channel.jpg);
}

#liquid .media {
	background: #FFF url(images/download.gif);
	border-right: 0;
}
</style>

</head>
<body><div align="center">

<div id="liquid">
	<ul class="liquids">
		<li><a href="#" target="_blank" class="liquid web" style="width: 125px;"><span>中国最火的四六级论坛</span></a></li>
		<li><a href="#" target="_blank" class="liquid print" style="width: 125px;"><span>最好的四六级频道</span></a></li>
		<li><a href="#" target="_blank" class="liquid media" style="width: 280px;"><span>最全的四六级资料下载</span></a></li>
	</ul>
</div>
</div>
</body>
</html>

JS代码(site.js):

var Site ={
	init:function(){
	if ( $('liquid') ) Liquid.parseLiquids();
	if ( $('folioMenu') ) Folio.init();
	if ( $('portfolioGallery') ){
	$('myGallery').setStyle('height','350px');
	var myGallery = new gallery($('myGallery'),{
	timed:false,showArrows:true,showCarousel:true,embedLinks:true,showInfopane:false}
);
}
if ( $('contact') ){
	ContactForm.init();
}
if( $('GMap') ){
	window.addEvent( 'onunload',GUnload );
	GoogleMapsAPM.init();
}
}
}
;
	var Liquid ={
	parseLiquids:function(){
	var liquids = $$('#liquid .liquid');
	var fx = new Fx.Elements(liquids,{
	wait:false,duration:800,transition:Fx.Transitions.elasticOut}
);
	liquids.each(function(liquid,i){
	liquid.addEvent('mouseover',function(e){
	e = new Event(e).stop();
	var obj ={
}
;
	obj[i] ={
	'width':[liquid.getStyle('width').toInt(),280]}
;
	liquids.each(function(other,j){
	if (other != liquid){
	var w = other.getStyle('width').toInt();
	if (w != 125) obj[j] ={
	'width':[w,125]}
;
}
}
);
	fx.start(obj);
}
);
}
);
	document.addEvent('mouseover',function(e){
	e = new Event(e);
	var rel = e.relatedTarget;
	if (!rel) return;
	if (rel.hasClass && (rel.hasClass('liquids') || rel.hasClass('liquid') || rel.id == 'liquid')){
	var obj ={
}
;
	liquids.each(function(other,j){
	obj[j] ={
	'width':[other.getStyle('width').toInt(),178]}
;
}
);
	fx.start(obj);
}
;
}
);
}
}
;
	var Folio ={
	init:function(){
	Folio.parseItems();
}
,parseItems:function(){
	var first = true;
	var items = $$('#folioMenu .folioItem');
	var fx = new Fx.Elements(items,{
	wait:false,duration:300,transition:Fx.Transitions.quadInOut}
);
	items.each( function( fitem,i){
	var myFx = new Fx.Style(fitem,'opacity').set(1);
	fitem.addEvent('mouseover',function(e){
	e = new Event(e).stop();
	var obj ={
}
;
	if( fitem.getStyle('opacity') != 0.5 ){
	obj[i] ={
	'opacity':[1,0.5]}
;
}
items.each( function( other,j){
	if( other != fitem ){
	if( other.getStyle('opacity') != 1 ){
	obj[j] ={
	'opacity':[other.getStyle('opacity'),1]}
;
}
}
}
);
	fx.start(obj);
}
);
	fitem.addEvent('mouseout',function(e){
	e = new Event(e).stop();
	var obj ={
}
;
	items.each( function( other,j){
	if( other.getStyle('opacity') != 1 ){
	obj[j] ={
	'opacity':[other.getStyle('opacity'),1]}
;
}
}
);
	fx.start(obj);
}
);
}
);
}
}
;
	var ContactForm ={
	init:function(){
	$('name').addEvent( 'focus',ContactForm.Clear );
	$('company').addEvent( 'focus',ContactForm.Clear );
	$('email_address').addEvent( 'focus',ContactForm.Clear );
	$('telephone').addEvent( 'focus',ContactForm.Clear );
	$('query').addEvent( 'focus',ContactForm.Clear );
}
,Clear:function( e ){
	var evt = new Event( e );
	switch( evt.target.name ){
	case 'name':if( evt.target.value == 'Your Name' ){
	evt.target.value='';
}
break;
	case 'company':if( evt.target.value == 'Your Company' ){
	evt.target.value='';
}
break;
	case 'email_address':if( evt.target.value == 'Your Email Address' ){
	evt.target.value='';
}
break;
	case 'telephone':if( evt.target.value == 'Your Telephone Number' ){
	evt.target.value='';
}
break;
	case 'query':if( evt.target.value == 'Your Enquiry' ){
	evt.target.value='';
}
break;
}
}
}
;
	var GoogleMapsAPM ={
	init:function(){
	if (GBrowserIsCompatible()){
	var map = new GMap2( $('GMap') );
	map.addControl(new GSmallMapControl());
	map.setCenter(new GLatLng(52.078181,-2.635477),15);
	// Our info window contentvar infoTabs = [new GInfoWindowTab("Address",'<div id="GMapAddress"><h4>allpaymedia</h4>Whitestone Business Park<br />Whitestone<br />Hereford HR1 3SE<br /></div>'),new GInfoWindowTab("Directions",'<div id="GMapDirections">On entering Whitestone Business Park\'s main entrance,bear left and,after approximately 200m,you will see the allpay.net building with client parking at the front.')];
	// Place a marker in the center of the map and open the info window// automaticallyvar marker = new GMarker(map.getCenter());
	GEvent.addListener(marker,"click",function(){
	marker.openInfoWindowTabsHtml(infoTabs);
}
);
	map.addOverlay( marker );
	marker.openInfoWindowTabsHtml(infoTabs);
}
}
}
;
	window.onDomReady(Site.init);

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