JQuery自适应全屏图片滚动鼠标上下滑动效果代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

245 978 327



特效描述:JQuery 自适应全屏 图片滚动 鼠标上下滑动效果。JQuery:全屏随鼠标滑动而滚动

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.screenscroll.js"></script>

2. HTML代码

<div id="content">
	<div id="tag">
		<div></div>
		<div></div>
	</div>
	<div class="screen" id="screen-1"><img src="images/1.jpg"/></div>
</div>
<script type="text/javascript">
$(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.onload=function(){
		var html = '<div class="screen" id="screen-'+i+'"><img src="images/'+i+'.jpg"/></div>';
		$("#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);
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 图片全屏 滚动切换 文字全屏 图片滚动 360全景 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播 全屏焦点图 全屏切换 宽屏全屏满屏

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到