js特效 15个小demo
js特效和15个小demo
代码如下：images文件夹未上传
1.图片切换：
<!DOCTYPE html> <html> <head> <title>图片切换</title> </head> <body> <img src="images/1.jpg" width="400" height="300" id="flower"> <br> <button id="prev">上一张</button> <button id="next">下一张</button> <script type="text/javascript"> //获取事件源 需要的标签 var flower = document.getElementById('flower'); var prevBut=document.getElementById('prev'); var nextBut = document.getElementById('next'); var mixIndex = 1,maxIndex = 4;currentIndex = mixIndex; //监听按钮的点击 //下一张 nextBut.onclick = function(){ //到最后一张，当前为第四张，当再次点击事件，当前跳回第一张 if (currentIndex === maxIndex) { currentIndex = mixIndex; }else{ currentIndex++; } flower.setAttribute('src',`images/${currentIndex}.jpg`) } //上一张 prevBut.onclick = function(){ if (currentIndex === mixIndex) { currentIndex = maxIndex; }else{ currentIndex--; } flower.setAttribute('src',`images/${currentIndex}.jpg`) } </script> </body> </html>
2.图片显示和隐藏
<!DOCTYPE html> <html> <head> <title>图片显示和隐藏</title> </head> <body> <button id="overflow">隐藏</button> <br> <img src="images/1.jpg" width="300" height="200"> <script type="text/javascript"> var butObj = document.getElementsByTagName('button')[0]; var newImage = document.getElementsByTagName('img')[0]; butObj.onclick = function(){ //判断文本内容来操作开关 if(butObj.innerHTML === '隐藏'){ newImage.style.display = 'none'; butObj.innerHTML = '显示'; }else{ newImage.style.display = 'block'; butObj.innerHTML = '隐藏'; } } </script> </body> </html>
3.相册切换效果
<!DOCTYPE html> <html> <head> <title> 相册切换效果 </title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; overflow: hidden; } li{ float: left; margin-left: 10px; margin-top: 20px; width: 46px; height: 26px; border: 2px solid #fff; } ul li.active{ border-color: red; } </style> </head> <body> <img src="images/1.jpg" width="300" id="bigImage"> <ul> <li class="active"> <a href="#"> <img src="images/1.jpg" width="46" class="smallImage"> </a> </li> <li> <a href="#"> <img src="images/2.jpg" width="46" class="smallImage"> </a> </li> <li> <a href="#"> <img src="images/3.jpg" width="46" class="smallImage"> </a> </li> <li> <a href="#"> <img src="images/4.jpg" width="46" class="smallImage"> </a> </li> </ul> <script type="text/javascript"> //获取事件源 var bigObj = document.getElementById('bigImage'); var smallObj = document.getElementsByClassName('smallImage'); //遍历集合，给每个img标签添加事件 for(var i =0;i<smallObj.length;i++){ smallObj[i].onmouseover = function(){ //在悬浮前清除所有li的class属性 for(var j =0;j<smallObj.length;j++){ smallObj[j].parentNode.parentNode.setAttribute('class',''); } //当悬浮到这张图片，设置他属性class为active this.parentNode.parentNode.setAttribute('class','active'); //获取到悬浮图片的src var smallImageSrc = this.getAttribute('src'); bigObj.setAttribute('src',smallImageSrc); } } </script> </body> </html>
4.关闭小广告
<!DOCTYPE html> <html> <head> <title>关闭小广告</title> <style type="text/css"> *{ padding: 0; margin:0; } #qe_code{ width: 180px; height: 160px; position: relative; } #qe_code img{ position: absolute; right: 0; } #qe_code span#close{ position: absolute; top: 0; left: 0; border: 1px solid red; } </style> </head> <body> <div id="qe_code"> <img src="images/1.jpg" id="code" width="168px" height= "160px"> <span id="close">X</span> <script type="text/javascript"> var qe_codeDiv = document.getElementById('qe_code'); var closeObj = document.getElementById('close'); //隐藏盒子ok~ closeObj.onclick = function(){ qe_codeDiv.style.display = 'none'; } </script> </div> </body> </html>
5.图片切换完整版 函数封装
<!DOCTYPE html> <html> <head> <title>图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; display: inline-block; margin-right: 20px; } #box{ border: 1px solid #ccc; width: 300px; height: 70px; padding-top:450px; background:url('images/1.jpg') no-repeat } </style> </head> <body> <div id="box"> <li class="item"> <img src="images/1.jpg" width="46"> </li> <li class="item"> <img src="images/2.jpg" width="46"> </li> <li class="item"> <img src="images/3.jpg" width="46"> </li> <li class="item"> <img src="images/4.jpg" width="46"> </li> </div> <script type="text/javascript"> //获取事件源 function $(id){ return typeof id ==='string'? document.getElementById(id):null; } var items = document.getElementsByClassName('item'); for(var i = 0;i<items.length;i++){ console.log(i); var item = items[i] item.id = i+1; //设置属性 item.onmouseover = function(){ $('box').style.background = `url('images/${this.id}.jpg') no-repeat` //模板字符串`` } } </script> </body> </html>
6.百度换肤
<!DOCTYPE html> <html> <head> <title>百度换肤</title> <style type="text/css"> *{ padding: 0; margin:0; } ul,li{ list-style: none; border: 0; } #bottom1{ position: fixed; width: 100%; height: 100%; top:0; left: 0; background-image:url('images/1.jpg'); background-position: center 0; background-repeat: no-repeat; } #top{ width: 100%; height: 120px; position: relative; z-index: 10; } #top ul{ width: 1200px; margin:0 auto; overflow: hidden; background-color: rgba(255,255,255,.5); } #top ul li{ float: left; } #top ul li img{ width: 180px; height: 124px; margin-left: 20px; } </style> </head> <body> <div id="bottom1"> </div> <div id="top"> <ul> <li class="item"> <img src="images/1.jpg"> </li> <li class="item"> <img src="images/2.jpg"> </li> <li class="item"> <img src="images/3.jpg"> </li> <li class="item"> <img src="images/4.jpg"> </li> </ul> </div> <script type="text/javascript"> //获取事件源 function $(id){ return typeof id ==='string'? document.getElementById(id):null; } var items = document.getElementsByClassName('item'); for(var i = 0;i<items.length;i++){ var item = items[i] item.id = i+1; //设置属性 item.onmouseover = function(){ $('bottom1').style.backgroundImage = `url('images/${this.id}.jpg')` //模板字符串`` } } </script> </body> </html>
7.音乐盒实现全选和反选
<!DOCTYPE html> <html> <head> <title>09音乐盒实现全选和反选</title> <style type="text/css"> *{ padding: 0; margin: 0; } #panel{ background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 400px; margin: 100px auto; } .panel-footer{ text-align: center; } </style> </head> <body> <div id="panel"> <div class="panel-title"> <h3>千千音乐盒</h3> <hr> </div> <div class="panel-content"> <input type="checkbox">漂洋过海来看你<br> <input type="checkbox">小酒窝<br> <input type="checkbox">林俊杰<br> <input type="checkbox">青花瓷<br> <input type="checkbox">千里之外<br> <input type="checkbox">我爱你<br> <input type="checkbox">南山南<br> <input type="checkbox">可惜不是你<br> </div> <div class="panel-footer"> <hr> <button id="allSelect">全选</button> <button id="cancelSelect">取消选中</button> <button id="reverseSelect">反选</button> </div> </div> <script type="text/javascript"> function $(id) { return typeof id ==='string'? document.getElementById(id):null; } //获取复选框 var inputs = document.getElementsByTagName('input'); //全选 $('allSelect').onclick = function(){ for(var i=0;i<inputs.length;i++){ inputs[i].checked = true; // inputs[i].setAttribute('checked','checked'); } } //取消选中 $('cancelSelect').onclick = function(){ for(var i=0;i<inputs.length;i++){ inputs[i].checked = false; } } //反选 $('reverseSelect').onclick = function(){ for(var i=0;i<inputs.length;i++){ //inputs[i].checked = !inputs[i].checked; if (inputs[i].checked) { inputs[i].checked = false; }else{ inputs[i].checked = true; } } } </script> </body> </html>
8.表单验证 成绩单前端简单检测合法
<!DOCTYPE html> <html> <head> <title>表单验证</title> <style type="text/css"> *{ padding: 0; margin: 0; } #prompt{ font-size: 12px; color: darkgray; } #score{ border: 1px solid darkgray; } /**绿色勾*/ .correct:before { content: '\2714'; color: #008100; } .incorrect:before { content: '\2716'; color: #b20610; } </style> </head> <body> <div id="box"> <label for="score">请输入你的成绩:</label> <input type="text" id="score" placeholder="请输入分数"> <span id="prompt">请输入你的成绩</span> </div> <script type="text/javascript"> function $(id){ return typeof id ==='string' ? document.getElementById(id):null; } $('score').onblur = function(){ var values = parseFloat(this.value); if(isNaN(values)){ $('prompt').innerHTML = '输入的成绩不正确'; $('prompt').setAttribute('class','incorrect'); this.style.borderColor = 'red'; }else if(values>0 && values <=100){ $('prompt').innerHTML = '输入的成绩正确'; $('prompt').setAttribute('class','correct'); this.style.borderColor = 'lightgreen'; // $('prompt').className ='correct' 设置属性 }else{ //超出的范围 $('prompt').innerHTML = '输入的成绩超出范围'; $('prompt').setAttribute('class','incorrect'); this.style.borderColor = '#ff7500'; } $('score').onfocus = function(){ $('prompt').innerHTML ='请输入你的成绩'; $('prompt').className=''; $('score').style.borderColor ='darkgray'; $('score').style.outline ='none'; $('score').value = ''; } } </script> </body> </html>
9.上传图片验证
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <label for="file">上传图片格式验证:</label> <input type="file" id="file"> <script type="text/javascript"> //获取事件源 function $(id){ return typeof id ==='string' ? document.getElementById(id): null; } //监听图片选择的变化 $('file').onchange=function(){ var path = this.value; console.log(path); //获取.后面的格式 var fileIndex = path.lastIndexOf('.'); var file_path = path.substr(fileIndex); //转为小写 var lower_suffix = file_path.toLowerCase(); console.log(file_path); //判断 if(lower_suffix==='.jpg' || lower_suffix ==='.gif' ||lower_suffix==='.png' || lower_suffix==='.jpeg'){ alert('上传图片格式正确！'); }else{ alert('上传图片格式不正确！'); } } </script> </body> </html>
10.随机验证码校验
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="code"></div> <input type="text" name="" id="newCode"> <input type="button" name="" id="validate" value="验证"> <script type="text/javascript"> //全局 var code=''; //获取标签 var codeDiv =document.getElementById('code'); var newCode = document.getElementById('newCode'); var validateBut = document.getElementById('validate'); //文本被添加验证码 createCode(); //给input输入框绑定点击事件 validateBut.onclick = function(){ var newCodeA=newCode.value.toUpperCase(); console.log(newCodeA); if(codeDiv.innerHTML===newCodeA){ // alert('验证通过！'); window.location.href = 'http://www.baidu.com'; }else{ alert('验证失败！'); newCode.value = ''; } } function random(lower, upper) { return Math.floor(Math.random() * (upper - lower)) + lower; } function createCode(){ var codeLength =4; var randomCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; for(var i=0;i<codeLength;i++){ var index = random(0,36); code+=randomCode[index]; } codeDiv.innerHTML = code; } </script> </body> </html>
11.发表评论
<!DOCTYPE html> <html> <head> <title>发表评论</title> <style type="text/css"> *{ padding: 0; margin:0; } ul{ list-style: none; } #box{ width: 1000px; border: 1px solid #ccc; margin: 100px auto; padding: 20px; /*background-color: red;*/ } #comment{ padding: 10px; width: 80%; font-size: 20px; outline: none; } .box_top{ margin-bottom: 50px; } #comment_content li{ border-bottom: 1px dashed #ccc; width: 80%; color: red; line-height: 45px; } #comment_content li a{ float: right; </style> </head> <body> <div id="box"> <div class="box_top"> <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论"> </textarea> <button id="btn">发表</button> </div> <ul id="comment_content"> </ul> </div> <script type="text/javascript"> window.onload=function(){ //监听按钮的点击 $('btn').onclick =function(){ //1.1 获取用户输入的内容 var content = $('comment').value; console.log(content); //1.2判断 if (content.length === 0) { alert('请输入内容！'); return; }else{ //1.3 创建li标签 var newLi = document.createElement('li'); newLi.innerHTML = `${content}<a href='javascript:void(0)'>删除</a>`; //往后面插入 // $('comment_content').appendChild(newLi); //往前面插入,以ul下儿子辈的第一个为标准 $('comment_content').insertBefore(newLi,$('comment_content').children[0]); //清楚输入框的内容 $('comment').value =''; }; //删除评论 var delBtn =document.getElementsByTagName('a'); for(var i=0;i<delBtn.length;i++){ //当被点击删除按钮 delBtn[i].onclick = function(){ //this是a，删除li this.parentNode.remove(); } } } function $(id){ return typeof id === 'string' ? document.getElementById(id):null; } } </script> </body> </html>
12.九宫格布局浮动实现
<!DOCTYPE html> <html> <head> <title>九宫格布局</title> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ overflow: hidden; } #wrap .item{ width: 248px; height: 300px; font-size: 13px; } #wrap .item .title{ width: 248px; height: 30px; line-height: 30px; overflow: hidden; margin-bottom: 10px; text-align: center; } #wrap .item .price{ color: #ff7500; font-size: 18px; font-weight: bold; text-align: center; } .imgContainer{ width: 248px; display: table-cell; text-align: center; } </style> </head> <body> <div class="cols"> <button>3列</button> <button>4列</button> <button>5列</button> </div> <div id="wrap"> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服精灵女巫</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> </div> <script type="text/javascript"> //获取事件源 var buts = document.getElementsByTagName('button'); var items = document.getElementsByClassName('item'); console.log(items); //监听按钮的点击 buts[0].onclick = function(){ zzy_flex(3); //这里直接调用函数 } buts[1].onclick = function(){ zzy_flex(4); } buts[2].onclick = function(){ zzy_flex(5); } //封装一个函数 function zzy_flex(colsNum){ for(var i= 0;i<items.length;i++){ items[i].style.float = 'left'; items[i].parentNode.style.width =(colsNum*items[i].offsetWidth)+'px'; } } </script> </body> </html>
13.九宫格布局定位实现
<!DOCTYPE html> <html> <head> <title>九宫格布局定位实现</title> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ /*overflow: hidden;*/ position: relative; } #wrap .item{ width: 248px; height: 300px; font-size: 13px; } #wrap .item .title{ width: 248px; height: 30px; line-height: 30px; overflow: hidden; margin-bottom: 10px; text-align: center; } #wrap .item .price{ color: #ff7500; font-size: 18px; font-weight: bold; text-align: center; } .imgContainer{ width: 248px; display: table-cell; text-align: center; } </style> </head> <body> <div class="cols"> <button>3列</button> <button>4列</button> <button>5列</button> </div> <div id="wrap"> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服精灵女巫</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/1.jpg" width="200px"> </div> <p class="title">衣服</p> <p class="price">￥69</p> </div> </div> <script type="text/javascript"> //获取事件源 var buts = document.getElementsByTagName('button'); var items = document.getElementsByClassName('item'); console.log(items); //监听按钮的点击 buts[0].onclick = function(){ zzy_flex(3); //这里直接调用函数 } buts[1].onclick = function(){ zzy_flex(4); } buts[2].onclick = function(){ zzy_flex(5); } //封装一个函数 function zzy_flex(colsNum){ //第0行第0列 top:0*h left:0*w //第0行第1列 top:0*h left:1*w //第0行第2列 top:0*h left:2*w //第1行第0列 top:1*h left:0*w //第1行第1列 top:1*h left:1*w //第1行第2列 top:1*h left:2*w for(var i=0;i<items.length;i++){ //求每个盒子的行数和列数，比如第10个盒子 10 3行 1列 //11 3 2 var row =parseInt(i/colsNum); //行 从0开始，第一张是 0 0; var col = parseInt(i%colsNum); //列 //设置盒子定位 items[i].style.position ='absolute'; items[i].style.top = (row*items[i].offsetHeight)+'px'; items[i].style.left = (col*items[i].offsetWidth)+'px'; } } </script> </body> </html>
14.日期特效
<!DOCTYPE html> <html> <head> <title>日期特效</title> <style type="text/css"> #nowDate{ position: relative; width: 300px; height: 200px; text-align: center; background-color: #ff7500; color: #fff; font-size: 16px; border-radius: 5px; } #day{ width: 120px; height: 120px; background-color: purple; position: absolute; top: 20px; left: 90px; line-height: 120px; text-align: center; vertical-align: middle; color: #fff; font-size: 40px; } </style> </head> <body> <div> <p id="nowDate"> </p> <p id="day"> </p> </div> <script type="text/javascript"> //获取事件源 var nowDate = document.getElementById('nowDate'); var day = document.getElementById('day'); //定时器 更新时间的变化 setInterval(nowNumTime,20); function nowNumTime(){ //创建对象 var now =new Date(); var year = now.getFullYear(); var month =now.getMonth(); var d = now.getDate(); var week = now.getDay(); var hour =now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var weeks =['星期天','星期一','星期二','星期三','星期四','星期五','星期六',] //拼接时间 var temp = ''+(hour>12 ? hour-12:hour); if(hour ===0){ temp='12'; } temp = temp+(minute<10 ? ':0' : ':')+minute; temp = temp+(second<10 ? ':0' : ':')+second; temp =temp+(hour>=12 ? ' P.M':' A.M'); //拼接年月日 星期 temp =`${year}年${month}月${d}日 ${temp} ${weeks[week]}`; nowDate.innerHTML = temp; day.innerHTML = d; } </script> </body> </html>
15.长图滚动
<!DOCTYPE html> <html> <head> <title>长图滚动</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ background-color: #000; } #box{ width: 658px; height: 400px; border: 1px solid #ff6700; margin: 100px auto; overflow: hidden; position: relative; } #box img{ position: absolute; top: 0; left: 0; } span{ position: absolute; width: 100%; height: 50%; left: 0; cursor: pointer; } #top{ top: 0; } #bottom{ bottom:0; } </style> </head> <body> <div id="box"> <img src="images/1.jpg"> <span id="top"></span> <span id="bottom"></span> </div> <script type="text/javascript"> //获取事件源 var box = document.getElementById('box') var pic = document.getElementsByTagName('img')[0] var divTop = document.getElementById('top'); var divBottom = document.getElementById('bottom'); //2添加事件 var num =0,timer =null ; divTop.onmouseover = function(){ //让图片滚动 clearInterval(timer); timer = setInterval(function(){ num-=10; if (num>=-680) { pic.style.top = num + 'px'; }else{ clearInterval(timer); } },100); } divBottom.onmouseover = function(){ //让图片滚动 clearInterval(timer); timer = setInterval(function(){ num+=10; if (num<=0){ pic.style.top = num + 'px'; }else{ clearInterval(timer); } },100); } //失去焦点时候清除定时 box.onmouseout= function(){ clearInterval(timer); } </script> </body> </html>
