首页 > 代码库 > 每日案例4
每日案例4
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>视觉滚动</title> <style type="text/css"> *{padding: 0;margin: 0;} img{max-width: 100%;} .article{z-index: 2;margin: 0 auto;} .content{position: relative;margin: 0 auto;background-repeat: no-repeat;background-position: top center;background-attachment: fixed;background-size: cover;height: 1030px;padding-top: 50px;overflow: hidden;} .content-1{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172602dj4h3k9406d9ud97.jpg);} .content-2{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172603re0t33x1lm9attmt.jpg);} .content-3{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172604wkfusrkbrrdzbqck.jpg);} .content h1{font: 700 60px Tahoma;padding-left: 20px;} .animg{position: absolute;left: -1000px;top: 160px;-webkit-transition-duration:1s;} .detailtitle{position: absolute;left: 0;top: -100px;padding: 10px 20px;background: #333;color: #fff;font-size: 24px;-webkit-transition-duration:2s;} .detail{position: absolute;left: 2000px;top: 620px;width: 100%;font-size: 16px;-webkit-transition-duration:2s;} .detailtitle-3{top: 550px;left: -1000px;} .content-focus .animg{left: 0;top: 160px;left: 20px;} .content-focus .detail{left: 0;top: 570px;left: 20px;} .content-focus .detailtitle{top: 500px;left: 20px;} .content-focus .detailtitle-3{left: 20px;} .slidecount{position: fixed;right: 10px;bottom: 50%;z-index: 1;} .slidecount li{margin-bottom: 10px;} .slidecount li a{display: block;width: 10px;height: 10px;background: gray;border: 3px solid white;overflow: hidden;line-height: 100px;border-radius: 10px;} .slidecount li a:hover{text-decoration: none;background: white;border: 3px solid orange;} .slidecount li .focus a{background: orange;border: 3px solid orange;} </style></head><body> <div class="article" style="height:2700px;"> <div class="content content-1" id="n1"> <h1>风景一</h1> <img class="animg"src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1344651748384.jpg" width="500" height="313"/> <p class="detailtitle">励志名言</p> <p class="detail">向着目标奔跑，何必在意折翼的翅膀，只要信心不死，就看的见方向，顺风适合行走，逆风更适合飞翔，人生路上什么都不怕，就怕自己投降。</p> </div> <div class="content content-2 content-focus" id="n2"> <h1>风景二</h1> <img class="animg" src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319163709435.jpg" width="500" height="313" /> <p class="detailtitle">智慧人生</p> <p class="detail"> 淡淡的日子淡然地过。生活如水，人生似茶，再好的茶放到水中一泡，时间久了，也就淡了。也许是棱角平了，或许是成熟稳重了，脚步越来越踏实，日子越来越平淡。人生步入另外一种境界，——淡然。 </p> </div> <div class="content content-3" id="n3"> <h1>风景三</h1> <img class="animg" src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319175496381.jpg" width="500" height="313" /> <p class="detailtitle detailtitle-3">名言警句</p> <p class="detail"> 无论今后的道路多么坎坷，只要抓住今天，迟早会在奋斗中尝到人生的甘甜。抓住人生中的一分一秒，胜过虚度中的一月一年！ </p> </div> </div> <div class="slidecount"> <ul> <li class="focus"><a href="javascript:;"onclick="scroll(‘n1‘)">1</a></li> <li><a href="javascript:;"onclick="scroll(‘n2‘)">2</a></li> <li><a href="javascript:;"onclick="scroll(‘n3‘)">3</a></li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var oWinTop; var oContentH=$(".content").height(); var oContentLen=$(".content").length; var vIndex=0; $(".article").css("height",oContentH*oContentLen); $(".content:eq("+vIndex+")").addClass("content-focus"); $(window).scroll(function(){ oWinTop=$(window).scrollTop(); $(".slidecount li").removeClass("focus"); $(".content").removeClass("content-focus"); if(oWinTop>=0&&oWinTop<oContentH){ vIndex=0; $(".slidecount li:eq("+vIndex+")").addClass("focus"); $(".content:eq("+vIndex+")").addClass("content-focus"); }else if(oWinTop>=oContentH&&oWinTop<(oContentH*2)){ vIndex=1; $(".slidecount li:eq("+vIndex+")").addClass("focus"); $(".content:eq("+vIndex+")").addClass("content-focus"); }else{ vIndex=2; $(".slidecount li:eq("+vIndex+")").addClass("focus"); $(".content:eq("+vIndex+")").addClass("content-focus"); } }) }) </script> <script type="text/javascript"> jQuery.getPos=function(e){ var l=0; var t=0; var w=jQuery.intval(jQuery.css(e,‘width‘)); var h=jQuery.intval(jQuery.css(e,‘height‘)); var wb=e.offsetWidth; var hb=e.offsetHeight; while(e.offsetParent){ l+=e.offsetLeft+(e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0); t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0); e=e.offsetParent; } l+= e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0); t+= e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0); return {x:l, y:t, w:w, h:h, wb:wb, hb:hb}; } jQuery.getClient=function(e){ if(e){ w = e.clientWidth; h = e.clientHeight; }else{ w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth; h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight; } return {w:w,h:h}; } jQuery.getScroll = function (e){ if(e){ t = e.scrollTop; l = e.scrollLeft; w = e.scrollWidth; h = e.scrollHeight; }else{ if(document.documentElement && document.documentElement.scrollTop){ t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; w = document.documentElement.scrollWidth; h = document.documentElement.scrollHeight; }else if(document.body){ t = document.body.scrollTop; l = document.body.scrollLeft; w = document.body.scrollWidth; h = document.body.scrollHeight; } }return { t: t, l: l, w: w, h: h }; } jQuery.intval=function (v){ v = parseInt(v); return isNaN(v) ? 0 : v; } jQuery.fn.ScrollTo = function(s){ o = jQuery.speed(s); return this.each(function(){ new jQuery.fx.ScrollTo(this, o); }) } jQuery.fx.ScrollTo = function (e, o){ var z = this; z.o = o; z.e = e; z.p = jQuery.getPos(e); z.s = jQuery.getScroll(); z.clear = function(){clearInterval(z.timer);z.timer=null}; z.t=(new Date).getTime(); z.step = function(){ var t = (new Date).getTime(); var p = (t - z.t) / z.o.duration; if (t>=z.o.duration+z.t) { z.clear(); setTimeout(function(){z.scroll(z.p.y, z.p.x)},13); }else{ st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t; sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l; z.scroll(st, sl); } } z.scroll = function (t, l){window.scrollTo(l, t)}; z.timer=setInterval(function(){z.step();},13); } </script> <script type="text/javascript"> function scroll(id){ $("#"+id).ScrollTo(2000); } $(function(){ $(‘.slidecount li‘).click(function(){ $(this).addClass(‘focus‘).siblings().removeClass(); }) }) </script></body></html>
每日案例4
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。