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

最新推荐文章于 2025-01-13 10:05:26 发布
最新推荐文章于 2025-01-13 10:05:26 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： Web编程入门 文章标签： javascript 前端 开发语言 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xFeater/article/details/128220565
版权
本文通过实战案例，教你如何使用JavaScript编程实现背景图像随着鼠标滚动而缩小的效果，并在下方显示文字。讲解了obj.opacity、pageYOffset和obj.style.backgroundSize等关键知识点，适合前端开发者学习。

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

在这里插入图片描述

案例介绍

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

案例演示

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

案例设计

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

源码学习

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


                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


                



	

		

			

				
					
js实现图片平滑滚动效果

				
			

			

				

					10-01
				

			

		

		

			
				
js实现漂亮的图片平滑滚动效果

			
		

	



                

            
              



	

		

			

				
					
jquery css3网页背景视差滚动效果特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
"jQuery CSS3网页背景视差滚动效果特效代码"是一个利用JavaScript库jQuery和CSS3技术实现的此类效果的实例。这个项目旨在通过让不同层的背景元素在页面滚动时以不同的速度移动，来创造出一种立体的视觉错觉，使网页...

			
		

	



              


  
              

                


	

		

			

				
					
在html中使用js实现图片的无缝滚动（四种状态）

					
最新发布

				
			

			

				

					有问题可关注公众号：前端研究院     后台输入问题回复
				

				

					01-13
					
					145
					
				

			

		

		

			
				
js原理获取整个ul和ul下面的所有li， 把ul里面的li内容添加一份，因为需要完成图片滚动效果所以需要二份完成无缝对接， 定义初始速度。设置定时器 在定时中进行判断 实现原理：因为ul是跟着父元素div进行定位的，所以ul的offsetleft的值初始值为0。只需要改变ul的left值就可以完成滚动效果 当ul的offsetleft值大于0的时候说明图片正在向右滚动，此时只需要把当前left值变成整个盒子的一半。并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接。

			
		

	





	

		

			

				
					
javascript实现滚动图片

				
			

			

				

					web开发自学
				

				

					06-28
					
					180
					
				

			

		

		

			
				

前台：
 <div class="block">
            <div class="title">
                <strong>服务展示 </strong>
            </div>
            <div class="content&quot

			
		

	



		

			
		



	

		

			

				
					
javascript实现图片滚动

				
			

			

				

					weixin_30371469的博客
				

				

					02-11
					
					312
					
				

			

		

		

			
				
闲来无事捣鼓了一个原来的js图片滚动
首先看看 静态页的结构：

<body>
<a href="javascript: le()">向左</a>
<a href="javascript: re()">向右</a>
<div id="img">
<ul id="imgul">
<li>&...

			
		

	





	

		

			

				
					
Javascript图片滚动

				
			

			

				

					weixin_34204057的博客
				

				

					10-23
					
					104
					
				

			

		

		

			
				
这两天做了一个图片滚动的效果，拿出来和大家共享。效果很简单，不过这是我第一次使用js库(prototype1.6)。虽然所引用的prototype文件大小远远超过了自己所写的代码，但是这毕竟是学习而已，用js库真的能让代码更简洁。
  查看示例

 这是第一个类，主要来负责一个SlideShow的初始化和自动播放，具有多个SlideItem实例，存储在items数组中...

			
		

	





	

		

			

				
					
javascript实现图片滚动效果

				
			

			

				

					全世界的屋顶
				

				

					02-23
					
					4333
					
				

			

		

		

			
				
无标题文档

	div{
		position:absolute;
	}








	
	//获取图片div对象
	var img=document.getElementById("divimg");

	//设置div左上角 起始点坐标
	var x=0,y=0;
	
	//设置图片的行进速度
	var xSpeed=5,ySpeed=5;
	
	//设置图片的最大浮动高度和宽度
	var

			
		

	





	

		

			

				
					
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的...

			
		

	





	

		

			

				
					
js实现图片滚动

				
			

			

				

					08-08
				

			

		

		

			
				
NULL
博文链接：https://youzhibing.iteye.com/blog/2146125

			
		

	





	

		

			

				
					
JavaScript实现图片连续滚动的案例

				
			

			

				

					01-17
				

			

		

		

			
				
JavaScript实现图片连续滚动的案例，实现首页中图片的轮滑

			
		

	





	

		

			

				
					
JavaScript 图片滚动

				
			

			

				

					01-19
				

			

		

		

			
				
超酷的JavaScript图片横向滚动，Js滚动类已经封装，为了设置方便，单独摘出了控制程序。

			
		

	





	

		

			

				
					
javascript 实现图片滚动

				
			

			

				

					diandian82的专栏
				

				

					06-10
					
					2101
					
				

			

		

		

			
				
http://www.w3.org/1999/xhtml" >    Picture operation test                                                                                                                                               

			
		

	





	

		

			

				
					
javaScript实现图片滚动

				
			

			

				

					只有想不到没有做不到，程序的力量。。。
				

				

					11-25
					
					818
					
				

			

		

		

			
				
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
					
					200
					
				

			

		

		

			
				
<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
					
					1052
					
				

			

		

		

			
				
图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个js代码是非常常见而好用的，看了我下面的讲解，或许知道为什么有时候会不兼容了。注释很详细！！大家一边看一边理解吧。














图片滚动







#demo {

background

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
小院里的霍大侠

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

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值