600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > html中鼠标移动有下拉图片 JQuery自适应全屏图片滚动鼠标上下滑动效果代码

html中鼠标移动有下拉图片 JQuery自适应全屏图片滚动鼠标上下滑动效果代码

时间:2024-01-26 17:47:39

相关推荐

html中鼠标移动有下拉图片 JQuery自适应全屏图片滚动鼠标上下滑动效果代码

特效描述: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);

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。