js年报特效

最新推荐文章于 2023-01-11 10:39:03 发布

sunlongxue8642

最新推荐文章于 2023-01-11 10:39:03 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sunlongxue8642/article/details/50481659

这篇博客介绍了如何使用JavaScript和CSS创建一个年历效果。通过设置HTML结构，定义样式以及使用jQuery监听滚动事件来实现背景图片随页面滚动而移动的视觉特效。主要涉及到CSS布局、背景图片重复以及jQuery滚动事件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*{margin:0;padding:0;}
html,body{margin:0;padding:0;}
img{border:0;}
div,span,p,ul,li,img,a,i,{margin:0;padding:0;}
.div1{width:1000px;height:1600px;background:#FCC;margin:0 auto;position:relative;}
.left{width:10px;height:2000px;background:url(images/123243.png) repeat-y;position:relative;left:250px;position:fixed;}
.left a{position:relative;margin-left:-25px;}
.right{width:800px;height:1000px;background:#C7A7C0;margin:0 auto;}
.n1{width:100%;height:370px;background:#FCD8C7;}
.n2{width:100%;height:370px;background:#FFC;}
.n3{width:100%;height:370px;background:#DFFFDF;}
.n4{width:100%;height:370px;background:#F2D2F7;}
$(document).ready(function(){
$(window).bind("scroll",function(){
var oImg=$(".left").find("img");
var x=$(".n2").offset().top-$(document).scrollTop(); //x为所取div元素与滚动条滚动高度的差，即为所取div元素距离可视区页面顶部的距离。
if(x>=0){
x=x+"px";
oImg.eq(1).css("marginTop",x);
}
else{
oImg.eq(1).css("marginTop",0);
}
});
});