图片滚动切换

最新推荐文章于 2024-02-04 17:30:00 发布

ikesi-X

最新推荐文章于 2024-02-04 17:30:00 发布

阅读量746

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/qq_22793991/article/details/83540311

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<!doctype>
<html>
	<head>
		<meta	content ="text/html; charset =utf-8"/>
		<link rel="stylesheet" type="text/css href="layout.css" />
		<title>hh</title>
		<style type="text/css" media="screen">
			@import url("layout.css");
		</style>
		<script>	
			function moveElement(nn,xx,yy,t) {

				var el = document.getElementById(nn);

				var xpos = parseInt(el.style.left);
				var ypos = parseInt(el.style.top);
				if(xpos == xx && ypos == yy){
					return true;	
				}
				if(xpos < xx)
				{
					xpos++;	
				}
				if(xpos > xx)
				{
					xpos--;	
				}
				if(ypos < yy)
				{
					ypos++;	
				}
				if(ypos > yy)
				{
					ypos--;	
				}
				el.style.left = xpos+"px";
				el.style.top = ypos+"px";
				var re = "moveElement('"+nn+"',"+xx+","+yy+","+t+")";
				movement = setTimeout(re,t);
			}
				
			function sshow(){
				var ss = document.getElementById("per");
				ss.style.position = "absolute";
				ss.style.top = "0px";
				ss.style.left = "0px";
				var li = document.getElementById("linklist");
				var lis = li.getElementsByTagName("a");
				lis[0].onmouseover = function(){
					moveElement("per",-100,0,10);	
				}
				lis[1].onmouseover = function(){
					moveElement("per",-200,0,10);	
				}
				lis[2].onmouseover = function(){
					moveElement("per",-300,0,10);	
				}
			}
			window.onload = function(){
				sshow();
			}
			
		</script>
	</head>
	<body>
		<h1>Web Design</h1>
		<p>These are the things you should know.</p>
		<ol id="linklist">
			<li>
				<a href="">t1</a>	
			</li>	
			<li>
				<a href="">t2</a>	
			</li>	
			<li>
				<a href="">t3</a>	
			</li>	
		</ol>
		<div id = "show">
			<img src="12.png" alt="build blocks of web design" title="zy" id = "per"/>
		</div>
	</body>
<html/>
//css样式
#show{
	width:100px;
	height:100px;
	position: relative;	
	overflow: hidden;
}

需要一张400*100的图片，模仿JavaScript+DOM编程艺术中的代码

ikesi-X

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片滚动切换

&lt;!doctype&gt;&lt;html&gt; &lt;head&gt; &lt;meta content ="text/html; charset =utf-8"/&gt; &lt;link rel="stylesheet" type="text/css href="layout.css" /&gt; &lt;title&
复制链接

扫一扫