前端js基础理论知识（七购物车，轮播图，表格滚动，图片跟随鼠标移动，点击图片拖拽，表格姓名查找）

本文详细介绍了多种前端特效与交互实现方法，包括购物车伸缩动画、轮播图切换、表格滚动、图片跟随鼠标移动及拖拽等效果，通过具体代码示例展示了如何运用HTML、CSS和JavaScript进行网页动态效果的开发。

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

购物车伸缩

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		div{height: 40px;text-align: center;line-height: 40px;color: white;border-radius: 3px;}
		#box{width: 60px;background: red;position: relative;margin-top: 200px;}
		#inner{width: 120px;background: blue;position: absolute;top: 0;z-index: -100;left:-60px;}
	</style>
</head>
<body>
	<div id="box">购
		<div id="inner">购物车</div>
	</div>
	<script type="text/javascript">
		var oBox=document.getElementById('box');
		var o=document.getElementById('inner');
		var t;
		var w=oBox.offsetWidth;
		//鼠标进入和鼠标离开
		oBox.onmouseenter=function () {
			clearInterval(t);//清除定时器
			t=setInterval(move,10,5,w);
		};

		//鼠标离开事件
		oBox.onmouseleave=function(){
			clearInterval(t);//清除定时器
			t=setInterval(moveLeft,10,5,-w);
		};

		//购物车位移
		function move(speed,endOffset){			
			var l=o.offsetLeft;//当前左边距
			if(l>=endOffset){
				clearInterval(t);
			}else{
				o.style.left=o.offsetLeft+speed+'px';
			}			
		}

		function moveLeft(speed,endOffset){			
			var l=o.offsetLeft;//当前左边距
			if(l<=endOffset){
				clearInterval(t);
			}else{
				o.style.left=o.offsetLeft-speed+'px';
			}
		}
	</script>
</body>
</html>

轮播图

（1）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{width: 590px;height: 470px;margin: 50px auto;position: relative;}
		#content div{display: none;}
		#content div img{width: 590px;height: 470px;}
		#content div.sel{display: block;}
		#box .left{position: absolute;left: 0px;top: 50%;margin-top: -16px}
		#box .right{position: absolute;top: 50%;right: 0px;float: right;margin-top: -16px;}
		#box .cus{position: absolute;bottom: 15px;left: 50%;margin-left: -80px}
		#box .cus li{list-style-type: none;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;float: left;
			margin-right: 10px;}
		#box .cus li.current{background: white;}
	</style>
</head>
<body>
    <div id="box">
    	<!-- (1) -->
    	<div id="content">
    		<div class="sel"><img src="images/1.jpg" alt=""></div>
    		<div><img src="images/2.jpg" alt=""></div>
    		<div><img src="images/3.jpg" alt=""></div>
    		<div><img src="images/4.jpg" alt=""></div>
    	</div>
       
        	<img class="arrow left" src="images/arrow-left.png" alt="">
    	    <img class="arrow right" src="images/arrow-right.png" alt="">
        
        <ol class="cus">
        	<li class="current"></li>
        	<li></li>
        	<li></li>
        	<li></li>
        </ol>
    	
    </div>
	<script type="text/javascript">
		var dis = document.getElementById('content').getElementsByTagName('div');
        var o = document.getElementById('box');//轮播区
        var left = document.getElementsByClassName('left');
        var right = document.getElementsByClassName('right');
        var s1 = document.getElementsByClassName('arrow');

        var lis = document.getElementsByClassName('cus')[0].getElementsByTagName('li');
        //console.log(lis[0]);

		var index=0;//轮播前默认选中第一张图片
        var color;//定义一个变量保存箭头图片背景
        var len=dis.length;
       t = setInterval(next,1000);//图片每间隔一秒轮播一次

          //箭头轮播
        for (var i = 0; i < s1.length; i++) {
            		s1[i].onmouseenter=function(){
            			color = this.style.background
            			this.style.background = 'rgba(0,0,0,0.6)';
            		};
            		s1[i].onmouseleave=function(){
				        this.style.background=color;
			         };
            	}  	
        //鼠标经过停止轮播
        o.onmouseenter = function(){
        	 o.style.cursor = 'pointer'
             clearInterval(t);
        }
        //鼠标离开继续轮播
        o.onmouseleave = function(){
        	t = setInterval(next,1000);
        }
        //右箭头
        right[0].onclick=function(){
        	next();
        }
        //左箭头
        left[0].onclick=function(){
            last();
        } 

        for (var j = 0; j<len; j++) {

        	lis[j]._index=j;
        	lis[j].onclick=function(){

        		lis[index].className='';
        		dis[index].className='';


        		this.className='current';
        		dis[this._index].className='sel'
        		index=this._index;
        	};
        }
        
        //轮播下一张
		function  next(){

			dis[index].className='';
            lis[index].className='';
			index++;
			if (index==dis.length) {
				index=0;
			}
           dis[index].className='sel';
           lis[index].className='current';
		}
		//轮播上一张
        function  last(){
           lis[index].className='';
			dis[index].className=''

			index--;
			if (index==-1) {
				index=dis.length-1;
			}
           dis[index].className='sel';
           lis[index].className='current';
		}
           


	</script>
</body>
</html>

（2）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	     *{margin: 0;padding: 0;}
		.content{margin: 50px auto;width: 590px;height: 470px;overflow: hidden;position: relative;}
		.box{width: 2360px;height: 470px;transition: 1s;position:absolute;left: 0;}
		.box img{float: left;width: 590px;height: 470px;} 
	</style>
</head>
<body>
	<div class="content">
		<div class="box">
			<img src="images/1.jpg" alt="">
			<img src="images/2.jpg" alt="">
			<img src="images/3.jpg" alt="">
			<img src="images/4.jpg" alt="">
		</div>
		
	</div>
	<script type="text/javascript">
		var os = document.getElementsByClassName('box')[0];
		var btn = document.getElementsByClassName('btn')[0];
		show();
        function show(){
        	setInterval(next,3000);
        }

		function  next() {
			
		    var s1=os.offsetLeft;
		   
		    if (s1==-1770) {
		    	s1=590;
		    }
		    os.style.left=s1-590+'px';
		}
	</script>
</body>
</html>

表格滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;}
		.scroll-box{height: 195px;width: 500px;overflow: hidden;position: relative;}
		.tab-scroll{position: absolute;left: 0;top: 0;transition: all 2s;border-top: none;}
		.tab-scroll td{border-top: none;}
	</style>
	<script type="text/javascript">
		/*
			2.实现表格滚动(每次滚动一行)
		*/

		window.onload=function () {
			var scrollTab=document.getElementsByClassName('tab-scroll')[0];//滚动的表格
			var tbody=scrollTab.getElementsByTagName('tbody')[0];//tbody

			var speed=scrollTab.getElementsByTagName('td')[0].offsetHeight+1;//行高(滚动速度)	 加上表格边框
			
			var count=0;//要追加到表格底部的行索引 	
			setInterval(scrollTop,1000);//每隔1秒滚动一次


			//实现表格向上滚动
			function scrollTop(){
				var t=scrollTab.offsetTop;//top值
				scrollTab.style.top=t-speed+'px';//滚动

				var trs=tbody.getElementsByTagName('tr');//每次都重新取出所有内容行				
				var newTr=trs[count].cloneNode(true);//复制行，得到新的行对象
				//将滚动的行追加到表格底部
				tbody.appendChild(newTr);
				count++;
			}
		};
	</script>
</head>
<body>
	<table class="top">
		<thead>
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>住址</th>
			</tr>
		</thead>
	</table>
	<div class="scroll-box">
		<table class="tab-scroll">
			<tbody>
				<tr>
					<td>1001</td>
					<td>李四</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1002</td>
					<td>王五</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1003</td>
					<td>王五</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1004</td>
					<td>Jack</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1005</td>
					<td>小兰</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1006</td>
					<td>王五</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1007</td>
					<td>王五</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1008</td>
					<td>Jack</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
				<tr>
					<td>1009</td>
					<td>小兰</td>
					<td>AAAA</td>
					<td>AAAA</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- <div id="hide-box"></div> -->
	<img src="images/1.jpg" alt="">
</body>
</html>

图片跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var oImg=createImg();//创建图片
		//鼠标移动事件
		document.onmousemove=function (e) {			
			//事件对象
			e=e||window.event;
			//获取鼠标位置
			var x=e.clientX;
			var y=e.clientY;
			//修改图片位置
			oImg.style.left=x+'px';
			oImg.style.top=y+'px';
			document.body.appendChild(oImg);//显示在页面中
		};

		//创建图片
		function createImg(){
			var img=document.createElement('img');
			img.src='images/3.jpg';
			img.style.width='50px';
			img.style.height='50px';
			img.style.position='absolute';
			return img;
		}
	</script>
</body>
</html>

鼠标点击图片拖拽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{width: 300px;position: absolute;left: 0;top: 0;}
	</style>
</head>
<body>
	<img src="images/3.jpg" alt="" draggable="false" id="pic">
	<script type="text/javascript">
		var oImg=document.getElementById('pic');

		var isDrag=false;//是否开始拖拽  false 不开始
		var disX,disY;//鼠标相对于图片的位置
		//鼠标按下事件
		oImg.onmousedown=function (e) {
			// console.log('down')	;
			isDrag=true;//开始			
			this.style.cursor='move';
			e=e||window.event;//兼容性写法
			//鼠标位置
			var x=e.clientX;
			var y=e.clientY;
			//鼠标相对于图片的坐标
			disX=x-this.offsetLeft;
			disY=y-this.offsetTop;
		};

		//鼠标移动事件
		document.onmousemove=function(e){		
			if(!isDrag)	{
				return;
			}
				// console.log('move');
			e=e||window.event;//兼容性写法
				//鼠标位置
			var x=e.clientX;
			var y=e.clientY;				
			//修改图片位置
			oImg.style.left=x-disX+'px';
			oImg.style.top=y-disY+'px';
					
		};

		//鼠标抬起事件
		document.onmouseup=function(){
			// console.log('up');
			isDrag=false;
			// this.style.cursor='default';
			oImg.style.cursor='default';
		};
	</script>
</body>
</html>

表格姓名查找

<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 20px;}
		th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
<script type="text/javascript">
		window.onload=function () {
			var txtId=document.getElementById('txt-id');
			var txtName=document.getElementById('txt-uname');
			//表格内容行对象集合
			var trs=document.getElementById('info').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
			//搜索事件
			document.getElementById('btn-search').onclick=function(){
				trimBg();
				//遍历内容行
				for(var i=0;i<trs.length;i++){
					var id=trs[i].children[0].innerHTML;//获取每一行的id 的内容
					var uName=trs[i].children[1].innerHTML;//获取每一行的姓名
					var userId=txtId.value.trim();//祛除空格后的数据
					var userName=txtName.value.trim();//祛除空格
					if((userId!=''&&userName==''&&id==userId)||
						(userId==''&&userName!=''&&userName==uName)||
						(userId!=''&&userName!=''&&id==userId&&userName==uName)){
						trs[i].style.background='yellow';
					}

				}
			};
			//祛除行背景
			function trimBg(){
				for(var i=0;i<trs.length;i++){
					trs[i].style.background='white';
				}
			}
		};
	</script>
<body>
	<label for="">ID</label><input type="text" id="txt-id">
	<label for="">姓名</label><input type="text" id="txt-uname">
	<button id="btn-search">搜索</button>
	<table id="info">
		<thead>
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>住址</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1001</td>
				<td>李四</td>
				<td>AAAA</td>
				<td>AAAA</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>王五</td>
				<td>AAAA</td>
				<td>AAAA</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>王五</td>
				<td>AAAA</td>
				<td>AAAA</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>Jack</td>
				<td>AAAA</td>
				<td>AAAA</td>
			</tr>
			<tr>
				<td>1005</td>
				<td>小兰</td>
				<td>AAAA</td>
				<td>AAAA</td>
			</tr>
		</tbody>
	</table>
</body>