特效描述:JQuery 自适应全屏 图片滚动 鼠标上下滑动效果。JQuery:全屏随鼠标滑动而滚动
代码结构
1. 引入JS
2. HTML代码
$(function(){
$('body,html').animate({scrollTop:0},300);
$.cxycs.screenscroll.init({
screens:["#screen-1"],//滚动标记的数组,类似于锚点数组
timer:500,//滚动间隔,默认500毫秒,500毫秒内鼠标滚动事件不执行页面滚动
speed:500,//滚动时间,默认500毫秒,500毫秒完成页面滚动动画
mouseScrollEventOnOff:true//鼠标滚动事件,默认为true,即开启,开启后,滚动事件由插件执行,若为false,则可以提出滚动事件自己来写滚动事件
});
$("#tag div").eq(1).html(($.cxycs.screenscroll.index+1)+"/"+num);
loadimages(2);
});
var num=2;
function loadimages(i){
if (i>num) return false;
$("#tag div").eq(0).html("正在加载第"+i+"张图片...");
var img = new Image();
img.src="images/"+i+".jpg";
img.οnlοad=function(){
var html = '
';
$("#content").append(html);
$.cxycs.screenscroll.opts.screens.push("#screen-"+i);
$("#tag div").eq(0).html("已加载"+i+"张图片");
return loadimages(i+1);
}
}
function screenScrollCallback(){
$("#tag div").eq(1).html(($.cxycs.screenscroll.index+1)+"/"+num);
}