jQuery仿獵豹瀏覽器鼠標滾動單頁面滑動播放效果



125 499 167



特效描述:器鼠標滾動 單頁面滑動 滑動播放效果,

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" />

2. 引入JS

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>

3. HTML代碼

<div id="pic1" num="1">
  <div class="nag">
    <div  class="ac active"><b></b></div>
    <div class="ac"><b></b></div>
    <div class="ac"><b></b></div>
    <div class="ac"><b></b></div>
    <div class="icon">
      <div class="xinlan"></div>
      <div class="tenxun"></div>
    </div>
  </div>
  <div class="divtop"> <img id="btntop" class="btntop" src="images/top.png" /> </div>
  <div class="back a1"> <a class="a1_one"></a> <a id="a1_a" class="a_0" target="_blank" href="#"></a>
    <!--<div class="a1_img">
			<img src="images/1.gif" />
			<img src="images/2.gif" />
			<img src="images/3.gif" />
		</div>
		<p id="n1p">歡迎使用獵豹瀏覽器4.0</p>
		<img id="n11img" class="n11" src="images/toptext.png" />
		<img id="n12img" class="n12" src="images/lbt.png" />-->
  </div>
  <!--<div class="back a2">
		<div class="n2"></div>
		<div id="n2yue1" class="n2yue1"></div>
		<div id="n2yue2" class="n2yue2"></div>
		<div id="hjimg" class="hjimg"></div>
	</div>-->
  <div class="back a2">
    <div class="n3"> <a target="_blank" href="#"></a> </div>
    <div id="n1yue3" class="yue3"></div>
    <img src="images/$.png"  class="yu1" /> <img src="images/$.png"  class="yu2 yutop" /> <img src="images/$.png"  class="yu3 yutop" /> <img src="images/$.png"  class="yu4 yutop" /> </div>
  <div class="back a3">
    <div class="n4"></div>
    <div id="n4yue1" class="n4yue1"></div>
    <div id="n4yue2" class="n4yue2"></div>
    <div class="zhuoz"></div>
    <img id="n5img" class="n5img" src="images/n5.png" /> </div>
  <div class="back a4">
    <div class="n5"> <a target="_blank" href="#"></a> </div>
  </div>
</div>
<script>
	//var index_img=0;
	/*$(".a1_img img").eq(0).fadeIn("slow");
	setInterval(function(){
		var index_0=index_img;
		index_img=index_img+1;
		if(index_img>=3) index_img=0;
		$(".a1_img img").eq(index_0).fadeOut("slow");
		$(".a1_img img").eq(index_img).fadeIn("slow");
		$("#a1_a").attr("class","a_"+index_img)
	},5000);*/
	function $en(tit){return encodeURIComponent(tit)}
	var title="我的天啊,大家快來用下新版獵豹瀏覽器4.0~真的太快了!跟光速似的!其他瀏覽器都弱爆了!!!網購上當還賠你錢,48360元哦~~不用獵豹用啥??不信?那就試試看!下載地址>>#忽悠你的話,俺請你吃飯!";
	//var url="#";
	var pic="http://www.liebao.cn/images/iconpic.png";
	$(".xinlan").click(function(){
		window.open('http://v.t.sina.com.cn/share/share.php?appkey=962772401&title='+$en(title)+'&pic='+pic);
	})
	$(".tenxun").click(function(){
		window.open('http://v.t.qq.com/share/share.php?title='+$en(title)+'&pic='+pic);
	})
	var h=$(window).height();
	var w=$(window).width();
	//var h1=(h1-500<30?30:h-580)+"px";
	//$(".divtop").css("bottom",h1);
	$(".back").css("height",h+"px");
	$(".nag").css("top",$(window).scrollTop() + 250 +"px");
	$(".yutop").css("top",(h+150)+"px");
	$("#hjimg").css("top",(h+430)+"px");
	var yueAnimate={
		lbyFun:function(){
			$("#n11img").css({"width": "65px","height": "5px","top": "300px","margin-left": "-32px","opacity":"0"});
			$("#n12img").css({"opacity":"0"});
			$("#n1p").css({"opacity":"0"});
			var y=460;
			$("#n12img").animate({
				"opacity": 1
			},800,'easeInCubic');
			$("#n1p").animate({
				"opacity": 1
			},800,'easeInCubic',function(){
				$("#n11img").animate({
					"opacity": 0.8,
					"width":"328px",
					"height":"27px",
					"top": "275px",
					"margin-left":"-164px"
				},400,'easeInCubic',function(){
					$("#n11img").animate({
						"opacity": 1,
						"width":"273px",
						"height":"22px",
						"top": "285px",
						"margin-left":"-137px"
					},200,"easeInCubic")
				});
			});
		},
		btntop :function(){
			$("#btntop").css({"margin-top": "0px"});
			$("#btntop").animate({
				"margin-top": "30px"
			},1000,'easeOutBounce');
		},
		yue :function(id,left,right,time){
			$(id).animate({
				"margin-left": right
			},time,function(){
				$(id).animate({
					"margin-left": left
				},time);
			});
		},
		hjFun:function(){
			$("#hjimg").css("top",($(window).height()+430)+"px");
			$("#hjimg").css("margin-left","-824px");
			$("#n2yue1").css("margin-left","-560px");
			$("#n2yue2").css("margin-left","55px");
			$("#hjimg").animate({
				"top": "230px",
				"margin-left":"-340px"
			},1000,'easeInOutQuint');
		},
		yuFun:function(){
			var x=$(window).width()/2-500+210;
			x=x<210?210:x;
			var y=460;
			$(".yutop").css("top",(h+150)+"px");
			$(".yu1").css({"left": "50px","top": "260px"});
			$(".yu2").css({"left": "250px"});
			$(".yu3").css({"left": "450px"});
			$(".yu4").css({"left": "650px"});
			$(".yu1").animate({
				"left": x-170+"px",
				"top":"384px"
			},1000,'easeInCubic');
			$(".yu2").animate({
				"left": x-160+"px",
				"top":"479px"
			},1000,'easeInCubic');
			$(".yu3").animate({
				"left": x-55+"px",
				"top":"509px"
			},1000,'easeInCubic');
			$(".yu4").animate({
				"left": x+38+"px",
				"top":"468px"
			},1000,'easeInCubic');
		},
		n5imgFun:function(){
			$("#n5img").css({"width": "20px","height": "16px","top": "470px","margin-left": "75px","opacity":"0"});
			var y=460;
			$("#n5img").animate({
				"opacity": 0.5,
				"width":"350px",
				"height":"276px",
				"top": "250px",
				"margin-left":"-70px"
			},800,'easeInBack',function(){
				$("#n5img").animate({
					"opacity": 1,
					"width":"320px",
					"height":"252px",
					"top": "260px",
					"margin-left":"-60px"
				},300,"easeInBack")
			});
		}
	}
	//鼠標滾動事件 
	var shubiao=true;
	var wheel = function(event) {  
		var delta = 0;  
		if (!event)
			event = window.event;  
		if (event.wheelDelta) {
			delta = event.wheelDelta / 120;
		} else if (event.detail) {
			delta = -event.detail / 3;
		}
		if (delta) handle(delta);
		if (event.preventDefault) event.preventDefault();  
		event.returnValue = false;  
	}
	if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
	document.onmousewheel = wheel;
	var $f=true;
	var handle = function(delta) {
		if(!shubiao) return;
		shubiao=false;
		var random_num = Math.floor((Math.random() * 100) + 50);
		if (delta < 0) {
			PicWheelScroll(1);
			$f=false;
			 //console.log("鼠標滑輪向下滾動:" + delta + "次!"); // 1  
			return false;  
		} else {
			$f=true;
			PicWheelScroll(0);
			//console.log("鼠標滑輪向上滾動:" + delta + "次!"); // -1  
			return false;  
		}
	}
	$(".ac").each(function(i){
		$(this).click(function(){
			$(".ac").removeClass("active");
			$(".ac").eq(i).addClass("active");
			var num=i+1;
			if(num=="4") $("#btntop").hide();
			else $("#btntop").show();
			gotoAnchor($(".a"+num));
			getAnchroFun(num);
		})
	})
	var PicWheelScroll = function(n){
		var num=$("#pic1").attr("num");
		if((num===4&&n===1) || (num===1&&n===0)) return;
		if(n==1){
			if(num<4) num++;
		}else{
			if(num>1) num--;
		}
		$(".ac").removeClass("active");
		$(".ac").eq(num-1).addClass("active");
		if(num=="4") $("#btntop").hide();
		else $("#btntop").show();
		gotoAnchor($(".a"+num));
		getAnchroFun(num);
	}
	yueAnimate.yue("#n1yue3","-510px","-150px",10000);
	yueAnimate.yue("#n2yue1","-560px","-375px",10000);
	yueAnimate.yue("#n2yue2","55px","260px",10000);
	yueAnimate.yue("#n4yue1","-240px","-160px",10000);
	yueAnimate.yue("#n4yue2","120px","230px",10000);
	setInterval(function(){
		yueAnimate.yue("#n1yue3","-510px","-300px",10000);
		yueAnimate.yue("#n2yue1","-560px","-375px",10000);
		yueAnimate.yue("#n2yue2","55px","260px",10000);
		yueAnimate.yue("#n4yue1","-240px","-160px",10000);
		yueAnimate.yue("#n4yue2","120px","230px",10000);
	},22000);
	setInterval(yueAnimate.btntop,2000);
	var getAnchroFun=function(num){
		var h=$(window).height();
		var h=(h-500<30?30:h-580)+"px";
		$(".divtop").css("bottom","30px");
		var n=$("#pic1").attr("num");
		switch(parseInt(num)){
			case 1:
				if(n==1&&$f) return false;
				yueAnimate.lbyFun();
				break;
			case 2:
				yueAnimate.yuFun();
				break;
			case 3:
				yueAnimate.n5imgFun();
				break;
			case 4:
				break;
		}
		$("#pic1").attr("num",num);
	}
	var gotoAnchor = function(selector,isauto){
		var anchor = $(selector);
		if (anchor.length < 0) return;
		var $win=$(window);
		var $body = $(window.document.documentElement);
		var ua = navigator.userAgent.toLowerCase();
		if (ua.indexOf("webkit") > -1) {
			$body = $(window.document.body)
		}
		var pos=anchor.offset();
		if (isauto) {
			var t = pos.top - $win.scrollTop(); //相對于屏幕顯示區
			var t2 = $win.height() - t;
			if (t2 < anchor.outerHeight()) {
				$body.animate({"scrollTop": pos.top}, "normal");
			}
			return;
		}
		$body.animate({"scrollTop": pos.top},{queue :false,complete: function(){shubiao=true;}});
	}
	gotoAnchor($(".a1"));
	yueAnimate.lbyFun();
	$(window).resize(function(){
		var h=$(window).height();
		$(".back").css("height",h+"px");
		var n=$("#pic1").attr("num");
		var h1=(h-500<30?30:h-580)+"px";
		//if(n==1) $(".divtop").css("bottom",h1);
		//else 
		$(".divtop").css("bottom","30px");
		gotoAnchor($(".a"+n));
	});
	$(".divtop").click(function(){
		var n=$("#pic1").attr("num");
		if(n=="3") $("#btntop").hide();
		n=parseInt(n)+1;
		if(n==5) {return;}
		$(".ac").removeClass("active");
		$(".ac").eq(n-1).addClass("active");
		gotoAnchor($(".a"+n));
		getAnchroFun(n);
		$("#pic1").attr("num",n);
	})
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子