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

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

在这里插入图片描述

案例介绍

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

案例演示

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

案例设计

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

源码学习

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


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小院里的霍大侠
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
js实现图片平滑滚动效果

				
			

			

				

					10-01
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
javascript制作网页图片上实现下雨效果

				
			

			

				

					12-11
				

			

		

		

			
				
RainyDay.js 是一个轻量级的JavaScript库，专门用于在网页背景图片上创建逼真的下雨效果。  首先，让我们深入理解这段代码的结构和工作原理。代码主要包括HTML、CSS和JavaScript三个部分：  1. **HTML**：HTML部分...

			
		

	



                


  
              

                


	

		

			

				
					
javascript实现滚动图片

				
			

			

				

					web开发自学
				

				

					06-28
					
					153
					
				

			

		

		

			
				

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

			
		

	





	

		

			

				
					
这个挺酷：原生JS代码实现：lightbox.+图片滚动（下：图片滚动部分）

					
最新发布

				
			

			

				

					uu0216的博客
				

				

					06-25
					
					502
					
				

			

		

		

			
				
我介绍了如何使用原生JavaScript+CSS实现了lightbox的基本功能。但我们这个图片组列表因为是数量可变的，所以，这样一下子都列出来是不行的。我们需要给外面的容器增加宽度和高度的限制，让溢出的图片，可以实现点击左右按钮滚动，这样才不会打乱页面的布局。这样我们就把滚动和lightbox两个部分都实现了。那么现在，就让我来介绍一下，我是怎么实现的。TIPs：本组滚动左右按钮是用css写的，没有使用图片，可以放心拿走。

			
		

	



		

			
		



	

		

			

				
					
javascript实现图片滚动

				
			

			

				

					weixin_30371469的博客
				

				

					02-11
					
					269
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
Javascript图片滚动

				
			

			

				

					weixin_34204057的博客
				

				

					10-23
					
					83
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
javascript实现图片滚动效果

				
			

			

				

					全世界的屋顶
				

				

					02-23
					
					4285
					
				

			

		

		

			
				
无标题文档

	div{
		position:absolute;
	}








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

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

			
		

	





	

		

			

				
					
jQuery图片平铺效果制作网页背景图片平铺代码 

				
			

			

				

					11-12
				

			

		

		

			
				
jQuery库，作为JavaScript的一个强大扩展，提供了丰富的功能来实现动态的、交互式的网页元素，包括背景图片平铺效果的制作。本文将深入探讨如何使用jQuery实现这种效果。  首先，我们需要了解什么是jQuery。jQuery是...

			
		

	





	

		

			

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

				
			

			

				

					03-20
				

			

		

		

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

			
		

	





	

		

			

				
					
sidescroller:用javascript制作横版卷轴游戏

				
			

			

				

					06-22
				

			

		

		

			
				
这可以通过改变背景图像的位置来实现，当主角移动时，背景以适当的速度反向移动，创造出移动的效果。使用CSS3的`transform`属性和`translateX`方法可以高效地实现这一功能。  角色和物体的运动需要数学知识，尤其是...

			
		

	





	

		

			

				
					
jquery实现导航背景图片上下翻滚效果

				
			

			

				

					06-06
				

			

		

		

			
				
在本案例中，我们需要关注的是动画部分，特别是针对背景图片的滚动效果。  要实现背景图片上下翻滚，我们需要做以下几个步骤：  1. **HTML 结构**：创建导航栏的HTML结构，通常包含一个包含导航链接的无序列表（`...

			
		

	





	

		

			

				
					
js实现图片滚动

				
			

			

				

					08-08
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					01-17
				

			

		

		

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

			
		

	





	

		

			

				
					
JavaScript 图片滚动

				
			

			

				

					01-19
				

			

		

		

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

			
		

	





	

		

			

				
					
javascript 实现图片滚动

				
			

			

				

					diandian82的专栏
				

				

					06-10
					
					2076
					
				

			

		

		

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

			
		

	





	

		

			

				
					
javaScript实现图片滚动

				
			

			

				

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

				

					11-25
					
					785
					
				

			

		

		

			
				
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
					
					182
					
				

			

		

		

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

			

		

		

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














图片滚动







#demo {

background

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
小院里的霍大侠

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值