当前位置:首页 > 网页特效 > 焦点图 >

jQuery实现4图切换全屏代码

时间:2014-08-19 08:57 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

jQuery实现4图切换全屏代码是一款鼠标滑过图片自动切换特效代码。jquery全屏鼠标滑过图片切换 所属专题:图片代码

<script type="text/javascript">
$(function(){
// 幻灯片图片滑动
$("html,body").animate({scrollTop:$("#slide").offset().top},800);
var a =0;
$("#slide>.slide_box").click(function(){
var a = $(this).find(".navbox>.navtitle a").attr("href");
window.open(a);
return !1 
}),
$("#slide>.slide_box").mouseover(function(){
var b =$(this).index();
if(b!= a){
$("#slide .navsumary").hide();
$(this).find(".navbox>.navsumary").show();
var c = "bg" + (b + 1);
b < a && ($.browser.msie?(
$(".slide_box").stop().animate({backgroundPositionX: "980px"}, 0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
$("#box_1").parent().stop().animate({backgroundPositionX: "0"}, 100),
$("#box_2").parent().stop().animate({backgroundPositionX:"-245px"},200),
$("#box_3").parent().stop().animate({backgroundPositionX: "-490px"},300),
$("#box_4").parent().stop().animate({backgroundPositionX: "-735px"},400,
function(){
$(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c);
}
)):(
$(".slide_box").stop().animate({backgroundPosition:"980px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
$("#box_1").parent().stop().animate({backgroundPosition:"0 0"},100),
$("#box_2").parent().stop().animate({backgroundPosition:"-245px 0"},200),
$("#box_3").parent().stop().animate({backgroundPosition:"-490px 0"},300),
$("#box_4").parent().stop().animate({backgroundPosition: "-735px 0"},400,
function(){
$(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
}
)), a = b),b > a &&($.browser.msie?(
$(".slide_box").stop().animate({backgroundPositionX: "-980px" },0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
$("#box_1").stop().parent().animate({backgroundPositionX:"0"},400,
function(){
$(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
}
),
$("#box_2").parent().stop().animate({ backgroundPositionX: "-245px" }, 300),
$("#box_3").parent().stop().animate({backgroundPositionX: "-490px"}, 200),
$("#box_4").parent().stop().animate({backgroundPositionX: "-735px"}, 100)):($(".slide_box").stop().animate({backgroundPosition:"-980px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),
$("#box_1").stop().parent().animate({backgroundPosition:"0 0"},400,
function(){
$(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)
}
),
$("#box_2").parent().stop().animate({backgroundPosition:"-245px 0"}, 300),
$("#box_3").parent().stop().animate({backgroundPosition:"-490px 0"},200),
$("#box_4").parent().stop().animate({backgroundPosition: "-735px 0"},100)
), a = b)
}
});

});
</script>


本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

焦点图下载排行

最新文章