教你用JavaScript制作背景图像滚动效果

原创 于 2022-12-07 15:10:03 发布 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言 #经验分享

本文通过实战案例，教你如何使用JavaScript编程实现背景图像随着鼠标滚动而缩小的效果，并在下方显示文字。讲解了obj.opacity、pageYOffset和obj.style.backgroundSize等关键知识点，适合前端开发者学习。

在这里插入图片描述

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个背景图像滚动效果。滚动鼠标背景图像缩小，下方滑动出现文字。通过实战我们将学会obj.opacity方法、pageYOffset属性、obj.style.backgroundSize方法。

案例演示

向下滚动鼠标，背景图片缩小显示文字。
在这里插入图片描述

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。
在这里插入图片描述

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
最低0.47元/天 解锁文章
js实现图片平滑滚动效果
10-01
js实现漂亮的图片平滑滚动效果
js实现图片滚动
08-08
NULL 博文链接：https://youzhibing.iteye.com/blog/2146125
JavaScript实现图片连续滚动的案例
01-17
JavaScript实现图片连续滚动的案例，实现首页中图片的轮滑
javascript实现滚动图片
web开发自学
06-28 228
前台： &lt;div class="block"&gt; &lt;div class="title"&gt; &lt;strong&gt;服务展示 &lt;/strong&gt; &lt;/div&gt; &lt;div class="content&quot
javascript实现图片滚动
weixin_30371469的博客
02-11 353
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构： <body> <a href="javascript: le()">向左</a> <a href="javascript: re()">向右</a> <div id="img"> <ul id="imgul"> <li>&...
jquery css3网页背景视差滚动效果特效代码
03-20
"jQuery CSS3网页背景视差滚动效果特效代码"是一个利用JavaScript库jQuery和CSS3技术实现的此类效果的实例。这个项目旨在通过让不同层的背景元素在页面滚动时以不同的速度移动，来创造出一种立体的视觉错觉，使网页...
javascript制作网页图片上实现下雨效果
12-11
RainyDay.js 是一个轻量级的JavaScript库，专门用于在网页背景图片上创建逼真的下雨效果。 首先，让我们深入理解这段代码的结构和工作原理。代码主要包括HTML、CSS和JavaScript三个部分： 1. **HTML**：HTML部分...
jQuery图片平铺效果制作网页背景图片平铺代码
11-12
jQuery库，作为JavaScript的一个强大扩展，提供了丰富的功能来实现动态的、交互式的网页元素，包括背景图片平铺效果的制作。本文将深入探讨如何使用jQuery实现这种效果。 首先，我们需要了解什么是jQuery。jQuery是...
网页特效：使用DIV、CSS及JAVASCRIPT打造图片滚动效果
在图片滚动效果中，CSS可以定义DIV容器的样式，如尺寸、背景、边框、定位等，并且可以定义图片的布局和动画效果。 - **布局控制**：通过CSS可以设置DIV的宽度、高度以及在页面中的位置。 - **滚动效果**：利用CSS的...
Javascript图片滚动
weixin_34204057的博客
10-23 130
这两天做了一个图片滚动的效果，拿出来和大家共享。效果很简单，不过这是我第一次使用js库(prototype1.6)。虽然所引用的prototype文件大小远远超过了自己所写的代码，但是这毕竟是学习而已，用js库真的能让代码更简洁。 查看示例 这是第一个类，主要来负责一个SlideShow的初始化和自动播放，具有多个SlideItem实例，存储在items数组中...
JavaScript 图片滚动
01-19
超酷的JavaScript图片横向滚动，Js滚动类已经封装，为了设置方便，单独摘出了控制程序。
javascript实现图片滚动效果
全世界的屋顶
02-23 4367
无标题文档 div{ position:absolute; } //获取图片div对象 var img=document.getElementById("divimg"); //设置div左上角 起始点坐标 var x=0,y=0; //设置图片的行进速度 var xSpeed=5,ySpeed=5; //设置图片的最大浮动高度和宽度 var
javascript 实现图片滚动
diandian82的专栏
06-10 2131
http://www.w3.org/1999/xhtml" >    Picture operation test                                                                                                                                               
javaScript实现图片滚动
只有想不到没有做不到，程序的力量。。。
11-25 843
Demo Text *{margin: 0;padding: 0;} #frame{width: 752px;height: 180px;position: absolute;margin:60px 60px;border: 1px solid green;overflow: hidden;} #frame ul{position: absolute;} #frame ul li{width:
js 实现 图片滚动
weixin_30478619的博客
05-05 226
<body OnLoad="swapPic()"> <script language="javascript" type="text/javascript"> var ranl = 0; var useRand = 0; images = new Array; images[1] = new Image(); images[1].src = "imag...
js 图片滚动实现
流浪若相惜的专栏
03-22 1181
图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个js代码是非常常见而好用的，看了我下面的讲解，或许知道为什么有时候会不兼容了。注释很详细！！大家一边看一边理解吧。 图片滚动 #demo { background
JS实现图片滚动效果
03-24 4195
代码转载自网络 ================================== JS文件代码 scrollimage.js ：   var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=doc
js实现图片滚动效果
彼岸花
08-20 493
js实现图片滚动效果 #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小院里的霍大侠

跟着我学习，不在枯燥，不在孤单

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值