前端js基础理论知识（七 购物车，轮播图，表格滚动，图片跟随鼠标移动，点击图片拖拽，表格姓名查找）
2019-02-22 13:28
453 查看
购物车伸缩
<!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<
4000
span class="token punctuation">);
};
//鼠标离开事件
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《鼠标点击物体，物体跟随光标移动》与《鼠标按住左键不放拖拽物体》
- NGUI 点击屏幕时在该点创建图片并跟随鼠标移动
- js实现图片跟随鼠标移动效果
- JS控制点击按钮图片向左或向右循环移动滚动效果
- js图片跟随鼠标移动代码
- js 鼠标放置图片展示大图并跟随鼠标移动
- JS原生代码实现鼠标移动图片随之移动效果（另加点击改变图片效果）
- js鼠标跟随移动显示表格上某一行的信息(包括表格外的信息)
- 网页中图片或者表格等元素用鼠标随意拖拽的JS代码[摘抄]
- js实现图片放大并跟随鼠标移动特效
- js图片跟随鼠标移动代码
- JS 事件基础 跟随鼠标移动
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- JS实现图片跟随鼠标移动
- JS:跟随鼠标移动的图片，兼容IE与DOM浏览器（已在实际中用懂啊）
- [JS实例] 跟随鼠标移动而发生视差动画的图片
- JS实现图片跟随鼠标移动
- Js实现图片轮播，以及鼠标移动选择指定图片
- 简单的js实现图片跟随鼠标移动效果