实现音悦效果
实现音悦轮播图效果
var current = 0;
var count = $(".pics-list>li").length;
function move(){
$(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");
$(".pics-list").css("left",-1200*current+"px");
}
function next(){
if(current {
next();
},3000)
$(".banner-box").hover(function(){
clearInterval(timer);
},function(){
timer= setInterval(() => {
next();
},3000)
})
$(".points-list>li").click(function(){
current=$(this).index();
move();
})
$(".buts>.next").click(function(){
next();
})
$(".buts>.prev").click(function(){ if(current>0){ current--; }else{ current=count -1; } move(); }) 实现效果图
$(".small_box").mousemove(function(e){ // 鼠标位置 var x=e.offsetX,y=e.offsetY; // 小黑框的左上角位置，-100让鼠标保证永远在小黑框的中间位置 var left=x-100; var top =y-100; if(left<0){ left=0; } if(top<0){ top=0; } if(left>200){ left=200; } if(top>200){ top=200; } $(this).find(".float_layer").css({ top:top+"px", left:left+"px" })
$(".big_box img").css({ top:-2 * top+"px", left:-2 * left+"px" }) }) 效果图：
if($(this).hasClass("active")){ $(this).removeClass("active").closest(".filter-list").css({"overflow":"hidden","height":"30px"}); }else{ $(this).addClass("active").closest(".filter-list").css({"overflow":"auto","height":"auto"}); } }) 效果图：
$(".buts>.prev").click(function(){ if(current>0){ current--; }else{ current=count -1; } move(); }) 实现效果图
top榜切换：
$(function(){ $(".top-list .title").click(function(){ $(this).addClass("active").siblings().removeClass("active"); $(".top-list-main ul").eq($(this).index()).show().siblings().hide(); }) }) 实现效果图：实现详情页面的图片放大效果： $(".small_box").hover(function(){ $(this).find(".float_layer").show(); $(".big_box").show(); },function(){ $(this).find(".float_layer").hide(); $(".big_box").hide(); })
$(".small_box").mousemove(function(e){ // 鼠标位置 var x=e.offsetX,y=e.offsetY; // 小黑框的左上角位置，-100让鼠标保证永远在小黑框的中间位置 var left=x-100; var top =y-100; if(left<0){ left=0; } if(top<0){ top=0; } if(left>200){ left=200; } if(top>200){ top=200; } $(this).find(".float_layer").css({ top:top+"px", left:left+"px" })
$(".big_box img").css({ top:-2 * top+"px", left:-2 * left+"px" }) }) 效果图：
专辑列表的查看更多与收起：
$(".load-more").click(function(){ 第一种方式 // var $list= $(this).closest(".filter-list"); // var height=$list.css("height"); // if(height==="30px"){ // $(this).addClass("active"); // $(this).closest(".filter-list").css({"overflow":"auto","height":"auto"}); // }else{ // $(this).removeClass("active"); // $(this).closest(".filter-list").css({"overflow":"hidden","height":"30px"}); // } 第二种方式if($(this).hasClass("active")){ $(this).removeClass("active").closest(".filter-list").css({"overflow":"hidden","height":"30px"}); }else{ $(this).addClass("active").closest(".filter-list").css({"overflow":"auto","height":"auto"}); } }) 效果图：