【前端项目学习】web前端#002图片淡入+图片切换+按钮实现+按钮切换翻译（html+css+javascript交互）

最新推荐文章于 2023-04-25 15:27:41 发布

小橙子Wu

最新推荐文章于 2023-04-25 15:27:41 发布

阅读量806

点赞数 2

分类专栏： web 文章标签： javascript css html

本文链接：https://blog.csdn.net/zbcwmq/article/details/120841895

版权

web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

关于学习的十点建议

通过随机数，随机实现图片的封面
鼠标放在图片上，就实现边框渲染
每次点击图片，图片淡入，并且实现图片的循环
本实例通过数组存放中英文，实现了点击按钮就实现中英文互译的功能
通过文件中保存的10张图片，实现了点击图片就切换图片的功能
完整代码

实现效果：（只例举前四张图片）

第一张图片
点击翻译可以实现中英文互换

在这里插入图片描述第三张图片第四张图片

随机数实现，边框渲染

//返回1-10之间的整数
		var j=Math.floor(Math.random()*10+1);
		imgDom.src="person/fbs-"+j+".jpg";
		divImgDom.appendChild(imgDom);

//边框实现
divImgDom.onmouseover = function(){
			this.style.border="10px solid rgb(0,255,0)";
			
		};
		divImgDom.οnmοuseοut=function(){
			this.style.border="";
			
		};

图片淡入

//设置朦胧程度
		var opac = 0.1;
		//渐显
		function  fadeIn(){
			if(opac<1){
				opac+=0.01;
				setTimeout(fadeIn,30);
				imgDom.style.opacity = opac;	
			}			
		};
		fadeIn();

中英文互译，图片切换，完整代码

imgDom.οnclick=function(){
			
			if(index==-1){
			butDom =document.createElement("input");
			butDom.value="翻译";
			butDom.type="button";
			divButtonDom.appendChild(butDom);
			}
			index=index+1;
			this.style.opacity = 0.1;//opacity是不透明度
			//opac在第一张图片已经被加到1，如果第二张图片也要实现朦胧效果opca要设置为0.1，实现层层递进的朦胧效果
			opac = 0.1;
			fadeIn();
			//主页面随机产生头像
			if(i==0){	
				this.src="person/fbs-"+j+".jpg";
			}
			else{
				this.src="person/fbs-"+i+".jpg";
			}
			i++;
			//填充标题段落内容
			headDom.textContent=title[i-1];
			paraDom.textContent=para[i-1];
			//如果图片放完就从头开始放
			if (i>=11)
			{
				i=0;
			}
			var count=0;//计算按钮点击次数
			butDom.οnclick=function(){
				count++;
				headDom.textContent=titleTra[i-2];
				paraDom.textContent=paraTra[i-2];
				if(count%2==0){
					//翻译回中文
					//填充标题段落内容
					headDom.textContent=title[i-1];
					paraDom.textContent=para[i-1];
				}
			};
		};//end of imgDom.onclick

完整代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>图片事件1</title>
  <style type="text/css">
  div#img{
	  float:left;
	  width:40%;
	  border:10px solid rgb(255,0,0);
	  background-color:bule;
	  cursor:pointer;
	}
	div#button{
	width:50px
	height:50px;
	font-size:20px;
	}
	input{
	font-size:2em;
	}
  img{
	width:100%;
  }
  body{
		width:40em;
		border:5px solid red;
		height:50em;
	    background-color: lightblue;
		}
  h1{
	  font-size:1.8em;
	  text-indent:2em;
	  height:100px;
	  text-align:justify;}
	p{
	  font-size:1.8em;
	  text-indent:2em;
	  border: 5px solid green;
	  height:420px;
	  text-align:justify;
	}
  </style>
  <script type="text/javascript">
  <!--
  //10个标题字符串
	var title=["《关于学习的十点建议》，点击头像继续","Slow down. The more you understand,the less you have to	memorize.","Do the exercises. Write your own notes.","Read the “There are No Dumb Questions.”","Make this the last thing you read before bed. Or at least the last challenging thing.","Drink water.Lots of it.","Talk about it. Out loud.","Listen to your	brain.","Feel something!","Create something!","Get Sleep."
	];
	var titleTra=["慢下来，你理解的越多，要记忆背诵的就越少","做运动写笔记","阅读\"没有愚蠢的问题\"","让它成为你的睡前读物，或者是最后一件具有挑战性的事情","多喝水","大声说出来","倾听内心的声音","感受事物","做一些事情吧！","去睡觉,好好休息"];
	var paraTra=["你可以这样做，让你的大脑屈服。所以，我们做了我们该做的。剩下的由你决定。这些建议只是一个起点;倾听你的大脑，找出什么对你有用，什么没用。尝试新事物。","不要只是阅读，要停下来思考，当书问你问题时，不要直接跳到答案。想象有人真的在问这个问题。你越强迫你的大脑思考，你学习和记忆的机会就越大。","我们把它们放进去，但如果是我们为你做的，那就像让别人为你做锻炼一样。不要只看练习。使用铅笔。有很多证据表明，学习时进行体育锻炼可以提高学习效率","这意味着所有的人。它们不是可选的侧边栏——它们是核心内容的一部分!不要跳过他们","学习的一部分(尤其是向长期记忆的转移)发生在你放下书本之后。你的大脑需要自己的时间来做更多的处理。如果你在这段时间里投入一些新的东西，你刚刚学到的一些东西就会丢失","你的大脑在液体浴中工作得最好。脱水(可能发生在你感到口渴之前)会降低认知功能","说话会激活大脑的另一部分。如果你想要理解一些东西，或者增加你以后记住它的机会，大声说出来。最好是试着向别人大声解释。你会学得更快，而且你可能会发现你在阅读时不知道的想法","注意你的大脑是否超负荷了。如果你发现自己开始浏览表面或忘记你刚刚读的东西，是时候休息了。一旦你超过了一个特定的点，你就不会通过尝试插入更多内容来更快地学习，甚至你可能会破坏这个过程","你的大脑需要知道这很重要。参与到故事中去。给照片配上你自己的说明。抱怨一个拙劣的笑话总比什么都感觉不到要好","将此应用到你正在设计的新项目中，或重做旧项目。只是做一些事情，以获得一些经验以外的练习和活动在这本书。你所需要的只是一支铅笔和一个要解决的问题，而这个问题可能会从javascript中受益","你必须建立很多新的大脑连接来学习编程。睡眠经常;它可以帮助"];
	//10个内容字符串
	var para=["Here’s what you can do to bend your brain into submission. So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.","Don’t just read. Stop and think. When thebook asks you a question, don’t just skip to the answer. Imagine that someone really is askingthe question. The more deeply you force your brain to think, the better chance you have of learning and remembering.","We put them in, but if we did them for you,that would be like having someone else do your workouts for you. And don’t just look atthe exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning. ","That means all of them. They’re not optional sidebars—they’re part of the core content! Don’t skip them.",
	"Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing-time, some of what you just learned will be lost. ","Your brain works best in a nice bath of fluid.Dehydration (which can happen before you ever feel thirsty) decreases cognitive function. ","Speaking activates a different part of the brain.If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.","Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.",
	"Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.",
	"Apply this to something new you’re designing, or rework an older project. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve… a problem that might benefit from usingJavaScript. ","You’ve got to create a lot of new brain connections to learn to program. Sleep often; it helps."];							
  window.onload=function(){	
		var paraDom = document.querySelector("p");
		var headDom = document.querySelector("h1");	
		var divImgDom = document.querySelector("div#img");
		var divButtonDom = document.querySelector("div#button");
		var bodyDom= document.querySelector("body");
		var imgDom =document.createElement("img");
		
		//返回1-10之间的整数
		var j=Math.floor(Math.random()*10+1);
		imgDom.src="person/fbs-"+j+".jpg";
		divImgDom.appendChild(imgDom);
		
		//填充标题段落内容
			headDom.textContent = title[0];
			paraDom.textContent = para[0];
	
			divImgDom.onmouseover = function(){
			this.style.border="10px solid rgb(0,255,0)";
			
		};
		divImgDom.onmouseout=function(){
			this.style.border="";
			
		};
		//设置朦胧程度
		var opac = 0.1;
		//渐显
		function  fadeIn(){
			if(opac<1){
				opac+=0.01;
				setTimeout(fadeIn,30);
				imgDom.style.opacity = opac;	
			}			
		};
		fadeIn();
		//从第二张图片开始循环
		var i=1;
		var index=-1;
		imgDom.onclick=function(){
			
			if(index==-1){
			butDom =document.createElement("input");
			butDom.value="翻译";
			butDom.type="button";
			divButtonDom.appendChild(butDom);
			}
			index=index+1;
			this.style.opacity = 0.1;//opacity是不透明度
			//opac在第一张图片已经被加到1，如果第二张图片也要实现朦胧效果opca要设置为0.1，实现层层递进的朦胧效果
			opac = 0.1;
			fadeIn();
			//主页面随机产生头像
			if(i==0){	
				this.src="person/fbs-"+j+".jpg";
			}
			else{
				this.src="person/fbs-"+i+".jpg";
			}
			i++;
			//填充标题段落内容
			headDom.textContent=title[i-1];
			paraDom.textContent=para[i-1];
			//如果图片放完就从头开始放
			if (i>=11)
			{
				i=0;
			}
			var count=0;//计算按钮点击次数
			butDom.onclick=function(){
				count++;
				headDom.textContent=titleTra[i-2];
				paraDom.textContent=paraTra[i-2];
				if(count%2==0){
					//翻译回中文
					//填充标题段落内容
					headDom.textContent=title[i-1];
					paraDom.textContent=para[i-1];
				}
			};
		};//end of imgDom.onclick

  };
  
  //-->
  </script>
 </head>
 <body>
	<h1></h1>
	<div id="img" >
	
	</div>
	<p ></p>
	<div id="button">
	</div >
	
 </body>
 
</html>