以下是 鼠标划入竖向伸展jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>鼠标划入竖向伸展jQuery焦点图</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
<div class="index-banner">
<div class="index_banner_cont">
<div class="index_banner_scroll">
<div> <img src="images/2013080315151043.jpg" width="1900" height="421" alt="Banner001" /> </div>
<div> <img src="images/2013080315152056.jpg" width="1900" height="421" alt="Banner002" /> </div>
<div> <img src="images/2013080315153420.jpg" width="1900" height="421" alt="Banner003" /> </div>
</div>
</div>
<div class="banner_btn">
<div class="banner_list">
<span></span>
<span></span>
<span></span>
</div>
<div class="banner_span">
<a href="javascript:void(0)"><img src="images/2013072519022574.jpg" width="49" height="42" alt="" /></a>
<a href="javascript:void(0)"><img src="images/2013072519024313.jpg" width="49" height="42" alt="" /></a>
<a href="javascript:void(0)"><img src="images/2013072519025292.jpg" width="49" height="42" alt="" /></a>
</div>
</div>
<div class="index-btn browser">
<span class="btn1" title="深圳网站建设沙漠风-成功案例" onclick="location.href='#'">成功案例</span>
<span class="btn2" title="深圳网站建设沙漠风-网站推广" onclick="location.href='#'">网站推广</span>
<span class="btn3" title="深圳网站建设沙漠风-手机网站" onclick="location.href='#'">手机网站</span>
<span class="btn4" title="深圳网站建设沙漠风-我们的实力" onclick="location.href='#'">我们的实力</span>
</div>
<div class="index_menu">
<div class="index_menu_item menuItem1"><img src="images/menu_pic1.jpg" width="258" height="112" alt="" />
<div class="clearfix">
<a href="#">知名客户</a>
<a href="#">网站案例</a>
<a href="#">客户评价</a>
<a href="#">客户列表</a>
</div>
</div>
<div class="index_menu_item menuItem2"><img src="images/menu_pic2.jpg" width="258" height="112" alt="" />
<div class="clearfix">
<a href="#" title="网站优化" >网站优化</a>
<a href="#" title="网站云推广" >网站云推广</a>
<a href="#" title="网站软文推广" >网站软文推广</a>
</div>
</div>
<div class="index_menu_item menuItem3"><img src="images/menu_pic3.jpg" width="258" height="112" alt="" />
<div class="clearfix">
<a href="#">手机网站案例</a>
<a href="#">手机网站建设</a>
<a href="#">苹果手机应用 </a>
<a href="#">安卓手机应用</a>
<a href="#">手机解决方案</a>
</div>
</div>
<div class="index_menu_item menuItem4"><img src="images/menu_pic4.jpg" width="258" height="112" alt="" />
<div class="clearfix">
<a href="#" title="关于沙漠风">关于沙漠风</a>
<a href="#" title="实力认可">实力认可</a>
<a href="#" title="沙漠风与众不同">沙漠风与众不同</a>
<a href="#" title="理念与信仰">理念与信仰</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
</body>
</html>JS代码(banner.js):
//banner(function ($){
jQuery.fn.bannerScroll = function (options){
var o = $.extend({
}
,$.fn.bannerScrollInit,options);
this.each(function (){
var $sorllList = $(".index_banner_scroll");
var index = o.index;
var $sorllDiv = $sorllList.find("div");
var numsize = $sorllDiv.length;
var $scrollB = $(".banner_btn");
var $sorllBtnList = $(".banner_list");
var $sorllBtn = $(".banner_span");
var $sorllBtnSpan1 = $sorllBtnList.find("span");
var $sorllBtnSpan = $sorllBtn.find("a");
$sorllBtnSpan1.eq(0).addClass("current");
$sorllBtnSpan.eq(0).addClass("current");
$sorllDiv.eq(0).show().siblings().hide();
$scrollB.hover(function(){
$sorllBtnList.hide();
$sorllBtn.show();
}
,function(){
$sorllBtnList.show();
$sorllBtn.hide();
}
) function autoplay(){
index++;
if (index >= numsize){
index = 0;
}
;
$sorllBtnSpan.eq(index).addClass("current").siblings().removeClass("current");
$sorllBtnSpan1.eq(index).addClass("current").siblings().removeClass("current");
$sorllDiv.eq(index).fadeIn("700").siblings().fadeOut("700");
}
;
if (o.auto){
var MyMal = setInterval(autoplay,o.speed);
$sorllBtnSpan.bind("click",function(){
MyMal = setInterval(autoplay,o.speed);
}
);
}
$sorllBtnSpan.bind("click",function (){
index = $(this).index() - 1;
clearInterval(MyMal);
autoplay();
}
);
}
)}
$.fn.bannerScrollInit ={
speed:4000,auto:true,index:0}
}
)(jQuery)$(document).ready(function (){
$(".index_banner_cont").bannerScroll();
}
);
$(document).ready(function(){
$(".btn4").css("borderRight","0");
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta){
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
}
else if (event.detail){
delta = -event.detail/3;
}
if (delta) handle(delta);
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll',wheel,false);
window.onmousewheel = document.onmousewheel = wheel;
//游览器判断if(!$.browser.msie){
$(".index-btn").addClass("browser");
}
_win();
$(window).resize(function(){
_win();
}
);
function _win(){
if($(window).width()>1024){
$(".index-banner").width($(window).width());
}
else{
$(".index-banner").width(1180);
}
}
//banner下面滑出菜单var $M = $(".index_menu_item");
var bro = $.browser;
$M.css({
"height":"0","paddingTop":"0","overflow":"hidden"}
);
$(".index-btn span").mouseover(function(){
if(bro.msie && bro.version<7){
var index = $(this).index() - 12;
$(this).parent().find("span").eq(index).addClass("cur1").siblings().removeClass("cur");
}
else{
var index = $(this).index();
//alert(index)$(this).addClass("cur").siblings().removeClass("cur");
}
$M.eq(index).stop().animate({
"height":"240px","paddingTop":"20px","overflow":"visible","top":"-260px"}
);
}
).mouseout(function(){
//var index = $(this).index() - 4;
if(bro.msie && bro.version<7){
var index = $(this).index() - 12;
$(this).removeClass("cur");
}
else{
var index = $(this).index();
$(this).removeClass("cur");
}
$M.eq(index).stop().animate({
"height":"0","paddingTop":"0","overflow":"hidden","top":"0"}
)}
);
$(".index_menu_item").mouseover(function(){
var index = $(this).index();
$(".index-btn span").eq(index).addClass("cur").siblings().removeClass("cur");
$M.eq(index).stop().animate({
"height":"240px","paddingTop":"20px","overflow":"visible","top":"-260px"}
);
}
).mouseout(function(){
var index = $(this).index();
$(".index-btn span").eq(index).removeClass("cur");
$M.eq(index).stop().animate({
"height":"0","paddingTop":"0","overflow":"hidden","top":"0"}
)}
);
}
);
CSS代码(index.css):
*{margin:0;padding:0;list-style:none;}
body{font-size:12px;color:#333;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;color:#000;}
/*banner*/
.index_banner_cont{width:100%;position:relative;}
.index_banner_scroll{position:relative;}
.index_banner_scroll div{position:absolute;top:0;left:50%;margin-left:-950px;z-index:0;}
.banner_btn{width:196px;height:46px;position:absolute;top:45px;right:50%;margin-right:-593px;z-index:10;}
.banner_list{height:46px;position:absolute;top:0;}
.banner_list span{width:53px;height:2px;background-color:#fff;margin:0 6px;display:block;float:left;cursor:pointer;}
.banner_list span.current{background-color:#333;}
.banner_span{display:none;position:absolute;top:0;}
.banner_span a{width:49px;height:42px;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* ie8 */
filter:alpha(opacity=50);/* ie5-7 */
-moz-opacity:0.5;/* old mozilla browser like netscape */
-khtml-opacity:0.5;background-color:#fff;display:block;margin:0 6px;float:left;padding:2px;}
.banner_span a.current{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* ie8 */
filter:alpha(opacity=100);/* ie5-7 */
-moz-opacity:1;/* old mozilla browser like netscape */
-khtml-opacity:1;}
.index-banner{width:1900px;position:relative;overflow:hidden;height:421px;}
.banner-ifo{width:1900px;position:absolute;left:50%;margin-left:-800px;top:0;height:421px;overflow:hidden;z-index:0;}
.index-btn{width:1179px;height:40px;margin:-40px auto 0 auto;background:url(../images/index-btnbg.png) repeat;z-index:100;}
.index-btn span{height:40px;float:left;border-right:1px solid #a7a7a7;color:#fff;line-height:40px;cursor:pointer;}
.index-btn a{background:url(../images/iebg.gif) repeat scroll;_position:relative;display:block;float:left;height:40px;line-height:200px;margin-top:-39px;width:294px;}
.index-btn span.cur,.index-btn span.cur1{background-color:#31bdeb;}
.btn1{width:179px;background:url(../images/btn1.png) no-repeat 80px center;padding-left:115px;}
.btn2{width:159px;background:url(../images/btn4.png) no-repeat 105px center;padding-left:135px;}
.btn3{width:164px;background:url(../images/btn3.png) no-repeat 100px center;padding-left:130px;}
.btn4{width:164px;background:url(../images/btn2.png) no-repeat 100px center;padding-left:130px;}
.browser{position:absolute;bottom:0;left:50%;margin-left:-590px;z-index:100;}
.index_menu{width:1180px;position:absolute;bottom:40px;left:50%;margin-left:-590px;z-index:101;}
.index_menu_item{width:257px;padding:20px 19px 0 19px;background-color:#fff;}
.index_menu_item div{padding:25px 0;}
.index_menu_item div a{width:123px;padding-left:5px;float:left;line-height:27px;font-family:"Microsoft YaHei";font-size:14px;}
.index_menu_item div img{width:258px;height:112px;}
.menuItem1{position:absolute;left:0;top:0;}
.menuItem2{position:absolute;left:295px;top:0;}
.menuItem3{position:absolute;left:590px;top:0;}
.menuItem4{position:absolute;left:884px;top:0;}
.menu-title .item-title{border-bottom:none;height:30px;}
分享到QQ
分享到微博
微信扫一扫
