JS实现案例（三个）

最新推荐文章于 2024-07-08 16:22:29 发布

@@123456胡斌

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量1.6k

点赞数 30

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wangleihubin/article/details/135554755

版权

一.轮播图：

css:

margin: 0;

padding: 0;

}

body{

height: 150vh;

display: flex;

justify-content: center;

align-items: center;

}

.container{

width: 650px;

display: flex;

/* 每个元素的间隔相等 */

justify-content: space-evenly;

/* 溢出隐藏 */

overflow: hidden;

border: 1px solid red;

/* -webkit-box-reflect: below ; */

}

.big-box{

width: 400px;

height: 500px;

/* 按照最小边长改变背景图片 */

background-size: cover;

transition: 0.4s;

}

.small-box{

width: 200px;

height: 500px;

/* 垂直均匀排列每个元素 */

display: flex;

flex-direction: column;

justify-content: space-between;

}

.small-box .img{

/* 相对定位 */

position: relative;

width: 200px;

height: 90px;

right: 0;

transition: 0.5s;

}

.small-box .img img{

width: 100%;

height: 100%;

object-fit: cover;

position: absolute;

right: 0;

/* 设置过滤 */

transition: 0.5s;

}

.small-box .img.active{

opacity: 0;

right: 250px;

}

.small-box .img:hover img{

opacity: 0;

right: 250px;

}

html:

</div>

js:

// 获取需要操作的元素

// 左边大图

let bigBox = document.querySelector(".big-box");

// 图片集合

let imgs = document.getElementsByClassName("img");

// 定时器

let timer = null;

// 当前图片的下标

let index = 0;

// 重置函数

function reset(){

for(let i=0; i<imgs.length;i++){

imgs[i].className="img";

}

// 选中函数

function selected(){

reset();

imgs[index].className="img active";

}

function play(){

timer = setInterval(function(){

selected();

index++;

bigBox.style.backgroundImage="url(./images/ou_"+index+".jpg)";

if(index==5){

index=0;

}

},1500);

}

// 循环绑定每一个小图片的鼠标移动事件

for(let i=0; i<imgs.length; i++){

// 鼠标移动到小图片触发

imgs[i].οnmοusemοve=function(){

// 左边大图变成当前小图片

bigBox.style.backgroundImage="url(./images/ou_"+(i+1)+".jpg)";

debugger

console.log("q")

console.log("pic="+bigBox.style.backgroundImage)

// 执行重置函数

reset();

clearInterval(timer);

// 更新当前图片下标执行轮播

index=i+1;

if(index==5){

index=0;

}

play();

}

play();

效果显示：

二.滚动显示:

css:

* {

box-sizing: border-box;

}

body {

background-color: aliceblue;

font-family: "Courier New", Courier, monospace;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

margin: 0;

overflow-x: hidden;

}

h1 {

margin: 10px;

}

.block {

background-color: burlywood;

color: azure;

display: flex;

align-items: center;

justify-content: center;

width: 500px;

height: 250px;

margin: 10px;

border-radius: 10px;

box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);

transform: translateX(400%);

transition: transform 0.4s ease;

}

.block:nth-of-type(even) {

transform: translateX(-400%);

}

.block.show {

transform: translateX(0);

}

.block h2 {

font-size: 18px;

letter-spacing: 5px;

}

html:

<body>

<h2>

1990年，我们的公司，华星醋业，作为一家专注于传统酿造醋的公司，

在山东济南成立。我们的初衷是传承和发扬中国的醋酿造技艺，同时为消费者提供健康、美味的食品。

</h2>

</div>

<h2>

1995年，我们成功研发出华星牌陈醋，以其独特的口感和优良的品质，迅速在市场上赢得了良好的口碑。我们的产品开始走出山东，进入全国市场。

</h2>

</div>

<h2>

2000年，我们进一步扩展生产规模，投资建设了新的生产基地，引进了先进的生产设备和技术，以提升我们的产品质量和生产效率。

</h2>

</div>

<h2>

2010年，华星醋业成为国内领先的醋公司之一，我们的产品已经覆盖了全国大部分地区，并开始进入国际市场。

</h2>

</div>

<h2>

2020年，我们继续深化对产品研发的投入，成功开发出多款新品，包括有机醋、果醋等，以满足不同消费者的需求。同时，我们也加强了对产品质量的把控，确保每一瓶华星醋都能达到我们自己的高标准。

</h2>

</div>

<h2>

2025年，华星醋业已经成为了全球知名的醋公司，我们的产品在全球范围内得到了广泛的认可和喜爱。我们将继续坚守初心，为消费者提供更多高品质、健康的食品。

</h2>

</div>

<h2>

未来，华星醋业将继续秉承传统酿造工艺，同时结合现代科技，不断推陈出新，为消费者提供更多更好的产品。我们希望通过我们的努力，让更多的人了解和喜爱中国的传统食品文化。

</h2>

</div>

</body>

js:

const boxes = document.querySelectorAll(".block");

window.addEventListener("scroll", checkBoxes);

checkBoxes();

function checkBoxes() {

const triggerBottom = (window.innerHeight / 5) * 4;

boxes.forEach((box) => {

const boxTop = box.getBoundingClientRect().top;

if (boxTop < triggerBottom) {

box.classList.add("show");

} else {

box.classList.remove("show");

}

});

}

效果显示：

注（当滚轮下滑是文本框从左右滑动到中间显示）

三.视差显示：

css:

margin: 0;

padding: 0;

}

body{

height: 200vh;

}

.bg{

background-size: cover;

background-position: 50% 50%;

height: 200vh;

font-size: 300px;

font-weight: 900;

text-align: center;

position: relative;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

overflow: hidden;

padding-top: 100px;

}

.bg::before{

content: "";

background-size: cover;

background-position: 50% 50%;

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

z-index: -99;

}

h2{

position: absolute;

top: 0px;

width: 100%;

text-align: center;

letter-spacing: 8px;

color: #000000;

}

h1{

letter-spacing: 10px;

position: absolute;

top: 145vh;

left: 50%;

transform: translateX(-50%);

width: 60%;

color: #fff;

padding: 100px 0;

text-align: center;

background-color: rgba(0, 0,0, 0.5);

}

html:

<body>

<h2>老师，滚动一下看看呗</h2>

<span>酸洗你公司文化</span>

</div>

<h1>我们的企业文化是围绕“健康、品质、服务”的理念建立的，这些词语不仅是我们的口号，也是我们每天工作的指导原则</h1>

</body>

js:

const bg=document.querySelector(".bg");

document.addEventListener("scroll",

function(){

const scrollY=window.scrollY;

if(scrollY!=0){

bg.style.backgroundPosition = `calc(50% - ${scrollY}px) calc(50% - ${scrollY}px)`;

}else{

bg.style.backgroundPosition="";

}

})

</script>

效果显示：

滑动前：

滑动后：

这个js做好看的秘诀就是有一张好看的背景图

@@123456胡斌

关注

30
点赞
踩
45

收藏

觉得还不错? 一键收藏
1
评论
JS实现案例（三个）

2020年，我们继续深化对产品研发的投入，成功开发出多款新品，包括有机醋、果醋等，以满足不同消费者的需求。我们希望通过我们的努力，让更多的人了解和喜爱中国的传统食品文化。1995年，我们成功研发出华星牌陈醋，以其独特的口感和优良的品质，迅速在市场上赢得了良好的口碑。2000年，我们进一步扩展生产规模，投资建设了新的生产基地，引进了先进的生产设备和技术，以提升我们的产品质量和生产效率。<h1>我们的企业文化是围绕“健康、品质、服务”的理念建立的，这些词语不仅是我们的口号，也是我们每天工作的指导原则</h1>
复制链接

扫一扫