图片放大

最新推荐文章于 2024-06-28 06:30:49 发布

笨笨的猿

最新推荐文章于 2024-06-28 06:30:49 发布

阅读量136

点赞数

文章标签： html5 jquery

本文链接：https://blog.csdn.net/qq_43744966/article/details/106571192

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			padding: 0px;
			margin: 0px;
			list-style: none;
		}
		#box{
			width:500px ;
			height: 100px;
			border: 1px solid;
			padding-top: 500px;
			margin: 100px auto;
			background: url(img/8.jpg) no-repeat;
		}
		ul{
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		</style>
	</head>
	<body>
		<div>
   </div>
    <div id="box">
    	<ul>
    		<li id="li1"><img src="img/8.jpg" alt="" style="width: 100px; height: 100px;"></li>
    		<li id="li2"><img src="img/9.jpg" alt="" style="width: 100px; height: 100px;"></li>
    		<li id="lm3"><img src="img/10.jpg" alt="" style="width: 100px; height: 100px;"></li>
    		<li id="lm4"><img src="img/11.jpg" alt="" style="width: 100px; height: 100px;"></li>
    		<li id="lm5"><img src="img/2.jpg" alt="" style="width: 100px; height: 100px;"></li>
    	</ul>
    </div>
    
    <script type="text/html">
  </script>
	<script type="text/html">
		/*window.onload=function(){
			var box=document.getElementById("box");
			//创建节点
			var img=document.createElement("img");
			img.src="img/1.jpg";
			box.appendChild(img);
			var p=document.getElementsByTagName("p");
			box.insertBefore(img,p);
			//删除节点
			//（1）拿到此节点
			var ht=document.getElementById("ht");
			//ht.parentNode.removeChild("ht");
			ht.remove();*/
			window.onload=function(){
			var box=document.getElementById("box");	
			var new=box.cloneNode(true);
			//document.write(new);
			
			document.body.appendChild(new);
				document.write(new);
			}
	</script>
	<script type="text/html">
		window.onload=function(){
			//节点属性
			var box=document.getElementById("box")
			//1/获取：getAttribute(名称)
			document.write(box.getAttribute("box"));
			//2、设置：setAttribute(名称,值)
		    box.setAttribute("box","1111");
		    box.setAttribute("aaa","hhhhhh");
		   //3、删除：removeAttribute(名称)
		   box.removeAttribute("aaa");
		}
	</script>
	<script type="text/html">
		window.onload=function(){
			//1、获取需要的标签
		var icon=document.getElementById("icon");
		var prev=document.getElementById("prev");
		var next=document.getElementById("next");
		//2、监听按钮的点击
		var maxIndex=4,minIndex=1,currentIndex=minIndex;
		prev.onclick=function(){
				if (currentIndex==minIndex){
				currentIndex==maxIndex;
			}else{
				currentIndex --;
			}
		};
			next.onclick=function(){
			if (currentIndex==maxIndex){
				currentIndex==minIndex;
			}else{
				currentIndex ++;
			}
			icon.setAttribute("src","img/icon_1" + currentIndex +".jpg");
		};
		}
	</script>
	<script type="text/html">
		Window.onload=function(){
			var a1=document.getElementById("a1");
			var img=document.getElementsByTagName("img");
			a1.onclick=function(){
			document.write(box.innerHTML);
			document.write(box.innerText);
			}
		}
	</script>
	<script type="text/html">
		window.onload=function(){
			var a1=document.getElementById("a1");
			var icon=document.getElementById("icon");
			a1.onclick=function(){
				if(a1.innerText=="隐藏"){
					icon.style.display="none";
					a1.innerText=="显示";
				}else{
					icon.style.display="block"
					a1.innerText=="隐藏"
				}
			}
		}
	</script>
	<script type="text/html">
		Window.onload=function(){
			//1、获取事件
			var ul=document.getElementById("small");
			var a=ul.getElementsByTagName("a");
			var name=document.getElementById("name");
			var big=document.getElementById("big");
		   //2、绑定事件
		   for(var i=0;i<a.length;i++){
		   	a[i].onclick=function(){
		   		alert("1111");
		   		big.src=this.href;
		   		return false;
		   		
		   	}
		   }
		}
	</script>
	<script type="text/html">
		window.onload=function(){
			/*var inp=document.getElementById("inp");
			inp.value="111";*/
			var box=document.getElementById("box");
			document.write(box.innerHTML);
			window.location.href="http://www.baidu.com";
			console.log(box.innerHTML);
			console.log(box.innerText);
		}
	</script>
	<script type="text/html">
	/*	document.write(document);*/
		document.write(document.body);
		console.log(document.body);
	</script>
	<script type="text/html">
		window.onload=function(){
			//1、获取相应的标签
		var box=document.getElementById("box");
		var two=document.getElementById("two");
		//2、监听鼠标进入
		box.onmouseover=function(){
			//2.1改变背景图片
			this.style.background='url("url(img/7_selected.gif)")';
			//2.2显示小图片
			two.style.display="block";
		};
		box.onmouseout=function(){
			//2.1改变背景图片
			this.style.background='url("url(img/7_normal.gif)")';
			//2.2显示小图片
			two.style.display="none";
		}
		}
	</script>
	<script>
		window.onload=function(){
			
			
			var li1=document.getElementById("li1");
			var li2=document.getElementById("li2");
			var lm3=document.getElementById("lm3");
			var lm4=document.getElementById("lm4");
			var lm5=document.getElementById("lm5");
			var box=document.getElementById("box");
			
			
			li1.onmouseover=function(){
				box.style.background='url("img/8.jpg")';
			};
			li2.onmouseover=function(){
				box.style.background='url("img/9.jpg")'; 
			};
			lm3.onmouseover=function(){
				box.style.background='url(img/10.jpg)'
			}
			lm4.onmouseenter=function(){
				box.style.background='url("img/11.jpg")';
			};
			lm5.onmouseenter=function(){
				box.style.background='url("img/2.jpg")';
			};
		}
	</script>
	
	</body>
</html>

所需图片材料

测试结果图

笨笨的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片放大

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; list-style: none; } #box{ width:500px ; height: 100px; border: 1px solid; .
复制链接

扫一扫