简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >第四章 JS特效

第四章 JS特效

刘静的博客
刘静的博客原创
2020年08月21日 13:13:32733浏览

第四章 JS特效

01.图片切换

效果图如下：

undefined

html代码如下：

  1. <img src="images/image01.jpg" id="flower" width="200" height="200">
  2. <br>
  3. <button id="prev">上一张</button>
  4. <button id="next">下一张</button>

javascript代码如下：

  1. // 1.获取事件源 需要的标签
  2. var flower = document.getElementById('flower');
  3. var nextBtn = document.getElementById('next');
  4. var prevBtn  = document.getElementById('prev');
  6. var minIndex = 1,maxIndex = 4; currentIndex = minIndex;
  7. // 2.监听按钮的点击
  8. nextBtn.onclick = function(){
  9. if(currentIndex === maxIndex){
  10.     // 到最后一张了
  11.     currentIndex = minIndex;
  12.     }else{
  13.     currentIndex++;
  14.     }
  15.     flower.setAttribute('src',`images/image0${currentIndex}.jpg`)
  16. }
  18. prevBtn.onclick = function(){
  19.     if(currentIndex === minIndex){
  20.             // 到最后一张了
  21.             currentIndex = maxIndex;
  22.      }else{
  23.             currentIndex--;
  24.      }
  25.      flower.setAttribute('src',`images/image0${currentIndex}.jpg`)
  26. }

02.显示和隐藏图片

效果图如下：

undefined

html代码如下：

  1. <button id="btn">隐藏</button>
  2. <br>
  3. <img src="images/img01.jpg" id="new">

javascript代码如下：

  1. // 1.获取事件源
  2. var obtn = document.getElementById('btn');
  3. var newImg = document.getElementsByTagName('img')[0];
  4. // var isShow = true;
  5. // 2.绑定事件
  6. obtn.onclick = function(){
  7.     // 3.事件驱动程序
  8.     if(obtn.innerHTML === '隐藏'){
  9.         newImg.style.display = 'none';
  10.         obtn.innerHTML = '显示';
  11.         // isShow = false;
  12.      }else{
  13.          newImg.style.display = 'block';
  14.         obtn.innerHTML = '隐藏';
  15.         // isShow = true;
  16.      }
  17. }

03.衣服相册

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding: 0;
  4.         margin: 0;
  5.     }
  6.     ul{
  7.         list-style: none;
  8.         overflow: hidden;
  9.     }
  10.     ul li{
  11.         float: left;
  12.         width: 50px;
  13.         height: 50px;
  14.         margin-left: 10px;
  15.         margin-top: 20px;
  16.         border: 2px solid #fff;
  17.     }
  18.     ul li.active{
  19.         border-color: red;
  20.     }
  21.  </style>

html代码如下：

  1. <img src="images/1.jpg" id="bigImg">
  2. <ul>
  3.     <li class="active">
  4.         <a href="">
  5.         <img src="images/1.jpg" width="46"  class="smallImg">
  6.         </a>
  7.     </li>
  8.     <li>
  9.         <a href="">
  10.         <img src="images/2.jpg" width="46" class="smallImg">
  11.         </a>
  12.     </li>
  13.     <li>
  14.         <a href="">
  15.         <img src="images/3.jpg" width="46" class="smallImg">
  16.         </a>
  17.     </li>
  18.     <li>
  19.         <a href="">
  20.         <img src="images/4.jpg" width="46" class="smallImg">
  21.         </a>
  22.     </li>
  23.     <li>
  24.         <a href="">
  25.         <img src="images/5.jpg" width="46" class="smallImg">
  26.         </a>
  27.     </li>
  28. </ul>

javascript代码如下：

  1. // 1.获取事件源
  2. var bigImg  = document.getElementById('bigImg');
  3. var smallImgs  = document.getElementsByClassName('smallImg');
  5. for(var i = 0; i < smallImgs.length; i++){
  6.     //2. 遍历集合，给每个img标签添加事件
  7.     smallImgs[i].onmouseover = function(){
  9.     // 3.事件处理程序
  10.     // 3.1 在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值
  11.     for(var j = 0; j < smallImgs.length; j++){
  12.         smallImgs[j].parentNode.parentNode.setAttribute('class', '');
  13.     }
  15.     // 3.2修改大图的src属性值
  16.     var smallImgSrc = this.getAttribute('src');
  17.     bigImg.setAttribute('src',smallImgSrc);
  19.     // 3.3 给鼠标悬浮的img标签的父标签添加类
  20.     this.parentNode.parentNode.setAttribute('class', 'active');
  21.     }
  22. }

04.关闭小广告

效果图如下：

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding: 0;
  4.         margin: 0;
  5.      }
  6.      #qe_code{
  7.          width: 180px;
  8.          height: 160px;
  9.          margin: 100px auto;
  10.          position: relative;
  11.      }
  12.      #qe_code img{
  13.          position: absolute;
  14.          right: 0;
  15.      }
  16.      #qe_code #close{
  17.          position: absolute;
  18.          width: 18px;
  19.          height: 18px;
  20.          border: 1px solid #e0e0e0;
  21.          text-align: center;
  22.          line-height: 18px;
  23.          cursor: pointer;
  24.          color: #666;
  25.      }
  26. </style>

html代码如下：

  1. <div id="qe_code">
  2.     <img src="images/phone_taobao.png" id="code">
  3.     <span id="close">X</span>
  4. </div>

javascript代码如下：

  1. var closeSpan = document.getElementById('close');
  2. var qe_code = document.getElementById('qe_code');
  3.     closeSpan.onclick = function(){
  4.         qe_code.style.display = 'none';
  5.     }

05.图片切换

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding: 0;
  4.         margin: 0;
  5.      }
  6.      #box{
  7.          border: 1px solid #ccc;
  8.          width: 430px;
  9.          height: 70px;
  10.          padding-top: 430px;
  11.          background: url('images/big_pic1.jpg') no-repeat;
  12.      }
  13.      #box ul li{
  14.          display: inline-block;
  15.          margin-right: 15px;
  16.      }
  17. </style>

html代码如下：

  1. <div id="box">
  2.     <ul>
  3.         <li id="item1" class="item">
  4.             <img src="images/pic1.jpg">
  5.         </li>
  6.         <li id="item2" class="item">
  7.             <img src="images/pic2.jpg">
  8.         </li>
  9.         <li id="item3" class="item">
  10.             <img src="images/pic3.jpg">
  11.         </li>
  12.         <li id="item4" class="item">
  13.             <img src="images/pic4.jpg">
  14.         </li>
  15.         <li id="item5" class="item">
  16.             <img src="images/pic5.jpg">
  17.         </li>
  18.     </ul>
  19. </div>

javascript代码如下：

  1. // 初学者 小白 书写的方式
  2. // 1.获取事件源
  3. /*
  4. var item1 = document.getElementById('item1');
  5. var item2 = document.getElementById('item2');
  6. var item3 = document.getElementById('item3');
  7. var item4 = document.getElementById('item4');
  8. var item5 = document.getElementById('item5');
  9. var oBox = document.getElementById('box');
  10. $('item1').onmouseover = function(){
  11.     oBox.style.background = `url('images/big_pic1.jpg') no-repeat`
  12. }
  13. $('item2').onmouseover = function(){
  14.     oBox.style.background = `url('images/big_pic2.jpg') no-repeat`
  15. }
  16. $('item3').onmouseover = function(){
  17.     oBox.style.background = `url('images/big_pic3.jpg') no-repeat`
  18. }
  19. $('item4').onmouseover = function(){
  20.     oBox.style.background = `url('images/big_pic4.jpg') no-repeat`
  21. }
  22. $('item5').onmouseover = function(){
  23.     oBox.style.background = `url('images/big_pic5.jpg') no-repeat`
  24. }
  25. */
  26. //封装代码1如下：
  27. // 1.获取事件源
  28. function $(id){
  29.     return typeof id === 'string' ? document.getElementById(id) : null;
  30. }
  32. function changebgcImg(liId,imgSrc){
  33.     // 2.添加事件
  34.     $(liId).onmouseover = function(){
  35.         // 3.改变背景图
  36.         $('box').style.background = imgSrc;
  37.     }
  38. }
  39. changebgcImg('item1',`url('images/big_pic1.jpg') no-repeat`);
  40. changebgcImg('item2',`url('images/big_pic2.jpg') no-repeat`);
  41. changebgcImg('item3',`url('images/big_pic3.jpg') no-repeat`);
  42. changebgcImg('item4',`url('images/big_pic4.jpg') no-repeat`);
  43. changebgcImg('item5',`url('images/big_pic5.jpg') no-repeat`);
  46. //封装代码2如下：
  47. // 1.获取事件源
  48. function $(id){
  49.     return typeof id === 'string' ? document.getElementById(id) : null;
  50. }
  51. var items = document.getElementsByClassName('item');
  52. for(var i = 0;i < items.length; i++){
  53.     var item  = items[i];
  54.     item.index = i+1;
  55.     items[i].onmouseover = function(){
  56.         $('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`;
  57.     }
  58. }

06.百度换肤

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         margin:0px;
  4.         padding:0px;
  5.      }
  6.      ul{
  7.         list-style:none;
  8.      }                          
  9.      #skin{
  10.         position:fixed;
  11.         top:0px;
  12.         left:0px;
  13.         width:100%;
  14.         height:100%;
  15.         backgroundimage:url('images/skin1.jpg');
  16.         background-position:center 0;
  17.         background-repeat:no-repeat;
  18.      }
  19.      #skin-photo{
  20.         width:100%;
  21.         height:100px;
  22.         position:relative;
  23.         z-index:10;
  24.      }
  25.      #skin-photo ul{
  26.         overflow:hidden;
  27.         width:1200px;
  28.         margin:0 auto;
  29.         background-color:rgba(255,255,255,0.5)
  30.      }
  31.     #skin-photo ul li{
  32.         float:left;
  33.         cursor:pointer;
  34.         height:120px;
  35.         margin:10px 0 10px 96px;
  36.     }
  37.     #skin-photo ul li img{
  38.         width:180px;
  39.         height:120px;
  40.     }
  41. </style>

html代码如下：

  1. <div id="skin"></div>
  2. <div id="skin-photo">
  3.     <ul>
  4.         <li>
  5.             <img src="images/skin1.jpg" id="0">
  6.         </li>
  7.         <li>
  8.             <img src="images/skin2.jpg" id="1">
  9.         </li>
  10.         <li>
  11.             <img src="images/skin3.jpg" id="2">
  12.         </li>
  13.         <li>
  14.             <img src="images/skin4.jpg" id="3">
  15.         </li>
  16.     </ul>
  17. </div>

javascript代码如下：

  1. ![07](C:\Users\静静\Desktop\1111\pic\07.png)![07](C:\Users\静静\Desktop\1111\pic\07.png)//1.获取对应的图片
  2. var skin = document.getElementById('skin');
  3. var allItems = document.getElementsByTagName('li');
  4. console.log(allItems);
  5.     for(var i=0;i<allItems.length;i++){     
  6.         allItems[i].index =i+1;
  7.         allItems[i].onclick =function(){
  8.         skin.style.backgroundImage=`url(images/skin${this.index}.jpg)`;
  9.     }
  10. }

07.千千音乐盒

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding:0px;
  4.         margin:0px;
  5.     }
  6.     #panel{
  7.         background-color:#fff;
  8.         border:1px solid #ddd;
  9.         border-radius:4px;
  10.         width:400px;
  11.         padding:20px;
  12.         margin:100px auto;
  13.     }
  14.     .panel-footer{
  15.            text-align:center;
  16.     } 
  17.     .panel-footer button{
  18.         margin-left:20px;
  19.         margin-top:20px;
  20.     }
  21. </style>

html代码如下：

  1. <div id="panel">
  2.     <div class="panel-title">
  3.         <h3>千千音乐盒</h3>
  4.         <hr>
  5.     </div>
  6.     <div class="panel-content">
  7.         <input type="checkbox">漂洋过海来看你<br>
  8.         <input type="checkbox">一眼万年<br>
  9.         <input type="checkbox">后来<br>
  10.         <input type="checkbox">没那么简单<br>
  11.         <input type="checkbox">如果你要离去<br>
  12.         <input type="checkbox">恋恋风尘<br>
  13.         <input type="checkbox">南山南<br>
  14.         <input type="checkbox">涛声依旧<br>
  15.         <input type="checkbox">可惜不是你<br>           
  16.     </div>
  17.     <div class="panel-footer">
  18.         <hr>
  19.         <button id="allSelect">全选</button>
  20.         <button id="cancelSelect">取消选中</button>
  21.         <button id="reverseSelect">反选</button>
  22.     </div>
  23. </div>

javascript代码如下：

  1. function $(id){
  2.     return typeof id === 'string'?document.getElementById(id):null;
  3. }
  4. //1.获取所有的复选框
  5. var inputs = document.getElementsByTagName('input');
  6. //2.全选
  7. $('allSelect').onclick = function(){
  8.     for(var i=0;i<inputs.length;i++){
  9.         inputs[i].checked = true;
  10.     }
  11. }
  12. //3.取消选中
  13. $('cancelSelect').onclick = function(){
  14.     for(var i=0;i<inputs.length;i++){
  15.         inputs[i].checked = false;
  16.     }
  17. }
  18. //4.反选
  19. $('reverseSelect').onclick = function(){
  20.     for(var i=0;i<inputs.length;i++){
  21.         // if(inputs[i].checked){
  22.         //     inputs[i].checked = false;
  23.         // }else{
  24.         //     inputs[i].checked = true;
  25.         // }
  26.         inputs[i].checked = !inputs[i].checked;
  27.     }
  28. }

08.表单验证

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding:0px;
  4.         margin:0px;
  5.     }
  6.     #prompt{
  7.         font-size:12px;
  8.         color:darkgray;
  9.     }
  10.     #score{
  11.         border:1px solid darkgray;
  12.     }
  13.     .right{
  14.         background:url('images/right.png') no-repeat 5px center;
  15.         padding-left:20px;
  16.         color:lightgreen !important;
  17.         background-size:15px 15px;
  18.     }
  19.     .error{
  20.         background:url('images/error.png') no-repeat 5px center;
  21.         padding-left:20px;
  22.         color:red !important;
  23.         background-size:15px 15px;
  24.     }
  25. </style>

html代码如下：

  1. <div id="box">
  2.     <label for="score">你的成绩：</label>
  3.     <input type="text" placeholder="请输入分数" id="score">
  4.     <span id="prompt">请输入您的成绩！</span>
  5. </div>

javascript代码如下：

  1. ![09](C:\Users\静静\Desktop\1111\pic\09.png)![09](C:\Users\静静\Desktop\1111\pic\09.png)function $(id){
  2.     return typeof id === 'string'?document.getElementById(id):null;
  3. }
  4. //input输入框失去焦点
  5. $('score').onblur = function(){
  6.     //1获取输入的内容
  7.     var value = parseFloat(this.value);
  8.     console.log(typeof value);
  9.     //2.验证
  10.     console.log(isNaN(value));
  11.     if(isNaN(value)){
  12.         //不是一个数
  13.         $('prompt').innerHTML = '输入的成绩不正确';
  14.         // $('prompt').setAttribute('class','error');
  15.         $('prompt').className = 'error';
  16.         this.style.borderColor = 'red';
  17.         }else if(value>0 && value<=100){
  18.         $('prompt').innerHTML = '输入的成绩正确';
  19.         // $('prompt').setAttribute('class','error');
  20.         $('prompt').className = 'right';
  21.         this.style.borderColor = 'green';
  22.     }else{
  23.         //超出成绩范围
  24.         $('prompt').innerHTML = '输入的成绩正确必须0-100';
  25.         // $('prompt').setAttribute('class','error');
  26.         $('prompt').className = 'error';
  27.         this.style.borderColor = 'red';
  28.     }
  29. }
  31. //input输入框获取焦点 恢复原来的状态
  32. $('score').onfocus = function(){
  33.     $('prompt').innerHTML = '请输入您的成绩！';
  34.     $('prompt').className = '';
  35.     $('score').style.borderColor = 'darkgrey';
  36.     $('score').style.outline = 'none';
  37.     $('score').value = '';
  38. }

09.上传图片验证

效果图如下：

undefined

html代码如下：

  1. <label for="file">上传图片格式验证：</label>
  2. <input type="file" name="" id="file">

javascript代码如下：

  1. //jpg png gif 
  2. window.onload = function(){
  3.     //1.获取标签
  4.     var file = document.getElementById('file');
  5.     //2.监听图片选择变化
  6.     file.onchange = function(){
  7.         //2.1获取上传的图片路径
  8.         var path = this.value;
  9.         // console.log(path);//C:\fakepath\an1.png
  10.         //2.2获取在路径字符串中占的位置
  11.         var loc = path.lastIndexOf('.');
  12.         //2.3截图文件路径的后缀名
  13.         var suffix = path.substr(loc);
  14.         //2.4统一转小写
  15.         var lower_suffix = suffix.toLowerCase();
  16.         //2.5判断
  17.         if(lower_suffix === '.jpg' || lower_suffix === '.png'|| lower_suffix === '.jpeg'|| lower_suffix             === '.gif'){
  18.             alert('上传图片格式正确');
  19.          }else{
  20.              alert('上传图片格式错误');
  21.          }
  22.      }
  23.  }

10.随机验证码校验

效果图如下：

undefined

css代码如下：

  1. #code{
  2.     width:100px;
  3.     height:100px;
  4.     background-color:#ddd;
  5.     padding:10px;
  6.     line-height:100px;
  7.     text-align:center;
  8.     font-size:20px;
  9.     color:red;
  10.     font-weight:bold;
  11. }
  12. input{outline:none;}

html代码如下：

  1. <div id="code"></div>
  2. <input type="text" id="newCode">
  3. <input type="button" id="validate" value="验证">

javascript代码如下：

  1. window.onload = function(){
  2.     //设置默认空的字符串
  3.     var code;
  4.     var codeDiv = document.getElementById('code');
  5.     var newCodeInput = document.getElementById('newCode');
  6.     var validate = document.getElementById('validate');
  8.     //加载页面对应的验证码
  9.     createCode();
  10.     //1.获取min到max之间的整数(1-100)
  11.     function random(max,min){
  12.         return Math.floor(Math.random()*(max-min)+min);
  13.     }
  15.     function createCode(){
  16.         code = '';
  17.         //设置长度;
  18.         var codeLength = 4;
  19.         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','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'];
  20.         for(var i = 0;i < codeLength; i++){
  21.                 //设置随机范围0~36
  22.                 var index = random(0,62);
  23.                 code += randomCode[index];
  24.             }
  25.             codeDiv.innerHTML = code;
  26.         }
  28.     //验证按钮校验
  29.     validate.onclick = function(){
  30.         //获取用户新输入的验证码
  31.         var newCode = newCodeInput.value;
  32.         // var newCode = newCodeInput.value.toUpperCase();
  33.         if(newCode === code){
  34.             //验证成功跳转网址
  35.             window.location.href = 'http://php.cn';
  36.         }else{
  37.             //验证失败
  38.             alert('输入验证码错误,请重新输入');
  39.             //输入框中的值为空
  40.             newCodeInput.value = '';
  41.             //重新生成验证码
  42.             createCode();
  43.         }
  44.     }
  45. }

11.发布评论

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{padding:0px;margin:0px;}
  3.     ul{list-style:none;}
  4.     #box{width:1000px;border:1px solid #ccc;margin:100px auto;padding:20px;}
  5.     #comment{width:80%;padding:10px 10px;font-size:20px;outline:none;}
  6.     .box_top{margin-bottom:20px;}
  7.     #comment_content li{border-bottom:1px dashed #ccc;width:800px;color:red;line-height:45px;}
  8.     #comment_content li a{float:right;}
  9. </style>

html代码如下：

  1. <div id="box">
  2.     <div class="box_top">
  3.         <textarea  id="comment" cols="100" rows="10" placeholder="请输入你的评论"></textarea>
  4.         <button id="btn">发布</button>
  5.     </div>
  6.         <!-- javascript:void(0); 禁用a链接本身事件 -->    
  7. </div>

javascript代码如下：

  1. window.onload = function(){
  2.     //1.监听按钮的点击
  3.     $('btn').onclick = function(){
  4.         //1.1获取用户输入的内容
  5.         var content = $('comment').value;
  6.         console.log(content);
  7.         //1.2判断
  8.         if(content.length === 0){
  9.             alert('请输入内容');
  10.             return;
  11.          }
  12.          //1.3创建li标签插入到ul中
  13.          var newLi = document.createElement('li');
  14.          newLi.innerHTML = `${content}<a href='javascript:void(0)'>删除</a>`;
  15.          // $('comment_content').appendChild(newLi);
  16.          $('comment_content').insertBefore(newLi,$('comment_content').children[0]);
  18.          //1.4清空输入框中的内容
  19.          $('comment').value='';
  20.          //1.5删除评论
  21.          var delBtns = document.getElementsByTagName('a');
  22.          for(var i=0;i<delBtns.length;i++){
  23.              delBtns[i].onclick = function(){
  24.                 this.parentNode.remove();
  25.               }
  26.          }
  28.      }
  30.     function $(id){
  31.         return typeof id === 'string'?document.getElementById(id):null;
  32.     }
  33. }

12.九宫格布局

效果图如下：

undefined

css代码如下：

  1. 1.浮动写法：
  2. *{margin:0px;padding:0px;}
  3. #wrap{overflow:hidden;}
  4. #wrap .item{width:248px;height:360px;font-size:13px;}
  5. #wrap .item .title{width:248px;height:30px;line-height:30px;overflow:hidden;margin-bottom:10px;}
  6. .imgContainer{width:248px;display:table-cell;text-align:center;}
  7. #wrap .item .price{color:#ff6700;font-size:18px;font-weight:bold;}
  9. 2.定位写法：
  10.  *{margin:0px;padding:0px;}
  11.  #wrap{position:relative;}
  12.  #wrap .item{width:248px;height:360px;font-size:13px;}
  13.  #wrap .item .title{width:248px;height:30px;line-height:30px;overflow:hidden;margin-bottom:10px;}
  14.  .imgContainer{width:248px;display:table-cell;text-align:center;}
  15.  #wrap .item .price{color:#ff6700;font-size:18px;font-weight:bold;}

html代码如下：

  1. <div class="cols">
  2.     <button>3列</button>
  3.     <button>4列</button>
  4.     <button>5列</button>
  5. </div>
  6. <div id="wrap">
  7.     <div class="item">
  8.         <div class="imgContainer">
  9.             <img src="images/taobao_1.jpg">
  10.         </div>
  11.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  12.         <p class="price">￥69</p>
  13.     </div>
  14.     <div class="item">
  15.         <div class="imgContainer">
  16.             <img src="images/taobao_2.jpg">
  17.         </div>
  18.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  19.         <p class="price">￥110</p>
  20.     </div>
  21.     <div class="item">
  22.         <div class="imgContainer">
  23.             <img src="images/taobao_3.jpg">
  24.         </div>
  25.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  26.         <p class="price">￥169</p>
  27.     </div>
  28.     <div class="item">
  29.         <div class="imgContainer">
  30.             <img src="images/taobao_4.jpg">
  31.         </div>
  32.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  33.         <p class="price">￥349</p>
  34.     </div>
  35.     <div class="item">
  36.         <div class="imgContainer">
  37.             <img src="images/taobao_5.jpg">
  38.         </div>
  39.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  40.         <p class="price">￥56</p>
  41.     </div>
  42.     <div class="item">
  43.         <div class="imgContainer">
  44.             <img src="images/taobao_6.jpg">
  45.         </div>
  46.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  47.         <p class="price">￥89</p>
  48.     </div>
  49.     <div class="item">
  50.         <div class="imgContainer">
  51.             <img src="images/taobao_7.jpg">
  52.         </div>
  53.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  54.         <p class="price">￥99</p>
  55.     </div>
  56.     <div class="item">
  57.         <div class="imgContainer">
  58.             <img src="images/taobao_8.jpg">
  59.         </div>
  60.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  61.         <p class="price">￥98</p>
  62.     </div>
  63.     <div class="item">
  64.         <div class="imgContainer">
  65.             <img src="images/taobao_9.jpg">
  66.         </div>
  67.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  68.         <p class="price">￥68</p>
  69.     </div>
  70.     <div class="item">
  71.         <div class="imgContainer">
  72.             <img src="images/taobao_10.jpg">
  73.         </div>
  74.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  75.         <p class="price">￥45</p>
  76.     </div>
  77.     <div class="item">
  78.         <div class="imgContainer">
  79.             <img src="images/taobao_11.jpg">
  80.         </div>
  81.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  82.         <p class="price">￥78</p>
  83.     </div>
  84.     <div class="item">
  85.         <div class="imgContainer">
  86.             <img src="images/taobao_12.jpg">
  87.         </div>
  88.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  89.         <p class="price">￥89</p>
  90.     </div>
  91.     <div class="item">
  92.         <div class="imgContainer">
  93.             <img src="images/taobao_13.jpg">
  94.         </div>
  95.         <p class="title">纯色短袖女春季秋t恤韩版国新款复制2019潮</p>
  96.         <p class="price">￥47</p>
  97.     </div>
  98. </div>

javascript代码如下：

  1. 1.浮动写法：
  2. //1.获取标签
  3. var btns = document.getElementsByTagName('button');
  4. var items = document.getElementsByClassName('item');
  5. //2.监听按钮的点击
  6. btns[0].onclick = function(){
  7.     lj_flex(3);          
  8. }
  9. btns[1].onclick = function(){
  10.     lj_flex(4);          
  11. }
  12. btns[2].onclick = function(){
  13.     lj_flex(5);          
  14. }
  16. function lj_flex(colNum){
  17.     //3.循环
  18.     for(var i=0;i<items.length;i++){
  19.         // var itemW = 248;
  20.         items[i].style.float='left';
  21.         // console.log(items[i].offsetWidth);
  22.         items[i].parentNode.style.width = (colNum*items[i].offsetWidth) + 'px';
  23.     }
  24. }
  26. 2.定位写法：
  27. //1.获取标签
  28. var btns = document.getElementsByTagName('button');
  29. var items = document.getElementsByClassName('item');
  30. //2.监听按钮的点击
  31. btns[0].onclick = function(){
  32.     lj_flex(3);          
  33. }
  34. btns[1].onclick = function(){
  35.     lj_flex(4);          
  36. }
  37. btns[2].onclick = function(){
  38.     lj_flex(5);          
  39. }
  41. function lj_flex(colsNum){
  42.     //第0行第0列 top:0*h left:0*h
  43.     //第0行第1列 top:0*h left:1*h
  44.     //第0行第2列 top:0*h left:2*h
  45.     //第1行第0列 top:1*h left:0*h
  46.     //第1行第1列 top:1*h left:1*h
  47.     //第1行第2列 top:1*h left:2*h
  48.     //第2行第0列 top:2*h left:0*h
  49.     //第2行第1列 top:2*h left:1*h
  50.     //第2行第2列 top:2*h left:2*h
  51.     for(var i=0;i<items.length;i++){
  52.         //求每个盒子占的行数和列数
  53.         var row = parseInt(i/colsNum);
  54.         var col = parseInt(i%colsNum);
  55.         //设置盒子定位
  56.         items[i].style.position = 'absolute';
  57.         items[i].style.top = (row*items[i].offsetHeight)+'px';
  58.         items[i].style.left = (col*items[i].offsetWidth)+'px';
  59. }

13.日期特效

效果图如下：

undefined

css代码如下：

  1. *{margin:0px;padding:0px;}
  2. #date{width:450px;height:300px;background-color:darkorange;border-radius:10px;margin:100px auto;}
  3. #nowDate{width:450px;height:60px;line-height:60px;text-align:center;color:#fff;font-size:26px;}
  4. #day{width:200px;height:200px;line-height:200px;background-color:orchid;margin:0px auto;text-align:center;color:#fff;font-weight:bold;font-size:60px;}

html代码如下：

  1. <div id="date">
  2.     <p id="nowDate"></p>
  3.     <p id="day"></p>
  4. </div>

javascript代码如下：

  1. //1.获取标签
  2. var nowDate = document.getElementById('nowDate');
  3. var days = document.getElementById('day');
  4. //用定时器更新时间的变化
  5. setInterval(nowTime,100);
  8. // nowDate.innerHTML= '';
  10. function nowTime(){
  11.     //0-23;
  12.     //6:27:35 P.M.
  13.     //6:30:01 P.M.
  14.     //6:04:01 A.M.
  15.     var now = new Date();
  16.     var hour = now.getHours();//时
  17.     var minute = now.getMinutes();//分
  18.     var second = now.getSeconds();//秒
  19.     var year = now.getFullYear();//年
  20.     var month = now.getMonth();//月
  21.     var day = now.getDate();//日
  22.     var week = now.getDay();//星期
  23.     // console.log(week);//索引
  25.     var weeks=['星期天','星期一','星期二','星期三','星期四','星期五'];
  27.     //18>12?(18-12):8
  28.     var temp ='' + (hour > 12 ? hour - 12 : hour);
  29.     if(hour === 0){
  30.     temp = '12';
  31.     }else if(hour < 10 && hour != 10){
  32.     temp = '0' + temp;
  33.     }
  34.     temp = temp + (minute < 10 ? ':0' : ":") + minute;
  35.     temp = temp + (second < 10 ? ':0' : ":") + second;
  36.     temp = temp + (hour >= 12 ? ' P.M.' : ' A.M.');
  37.     temp = `${year}年${month}月${day}日${temp}${weeks[week]}`;
  38.     nowDate.innerHTML = temp;
  39.     days.innerHTML = day;
  40. }

14.定时器的回顾和transform的应用

css代码如下：

  1. #box{
  2.     width:50px;
  3.     height:50px;
  4.     background-color:red;
  5.     /* transform:translate(100px,200px)rotate(50deg)scale(2.0)skew(10deg); */
  6.     /* translate:位移;rotate:旋转;scale:放大;skew:倾斜; */
  7. }

html代码如下

  1. <button id="start">开启</button>
  2. <button id="stop">关闭</button>
  4. <button id="btn">形变</button>
  5. <div id="box"></div>

javascript代码如下：

  1. //1.获取标签
  2. var start = document.getElementById('start');
  3. var stop = document.getElementById('stop');
  4. var num = 0,timer = null;
  5. start.onclick = function(){
  6.         //使用定时器的时候先清除定时器再开启定时器，防止用户频繁性的开启定时器
  7.         clearInterval(timer);
  8.         timer = setInterval(function(){
  9.             num++;
  10.             console.log(num);
  11.         },1000)
  12.     }
  14. stop.onclick = function(){
  15.     clearInterval(timer);
  16. }
  18. window.onload = function(){
  19.     var btn = document.getElementById('btn');
  20.     var box = document.getElementById('box');
  21.     var index = 0;
  22.     btn.onclick = function(){
  23.     index++;
  24.     box.style.transform =   `translate(${index*100}px,${index*50}px)rotate(${index*10}deg)scale(${index*1.3})`;
  25.     }
  26. }

15.数字时钟案例

效果图如下：

undefined

css代码如下：

  1. <style type="text/css">
  2.     *{padding:0px;margin:0px;}
  3.     #clock{width:600px;height:600px;background:url('images/clock.jpg')no-repeat;position:relative;}
  4.     #hour,#minute,#second{position:absolute;width:30px;height:600px;left:50%;top:0;margin-left:-15px;}
  5.     #hour{background:url(images/hour.png)no-repeat center center;}
  6.     #minute{background:url(images/minute.png)no-repeat center center;}
  7.     #second{background:url(images/second.png)no-repeat center center;}
  8. </style>

html代码如下：

  1. <div id="clock">
  2.     <div id="hour"></div>
  3.     <div id="minute"></div>
  4.     <div id="second"></div>
  5. </div>

javascript代码如下：

  1. //1.获取标签
  2. var hour = document.getElementById('hour');
  3. var minute = document.getElementById('minute');
  4. var second = document.getElementById('second');
  5. //2.开启定时器获取当前时间
  6. setInterval(function(){
  7.     //2.1获取当前的时间戳
  8.     var now =new Date();
  9.     //2.2获取小时 分钟 秒
  10.     var sec = now.getSeconds();
  11.     var min = now.getMinutes()+sec/60;
  12.     var hou = now.getHours()%12+min/60;
  14.     //2.3旋转
  15.     second.style.transform =`rotate(${sec*6}deg)`;
  16.     minute.style.transform =`rotate(${min*6}deg)`;
  17.     hour.style.transform =`rotate(${hou*30}deg)`;
  18. },10)

16.长图滚动案例

效果如下：

undefined

css代码如下：

  1. <style type="text/css">
  2. *{padding:0px;margin:0px;}
  3. body{background-color:#000;}
  4. #box{width:658px;height:400px;border:1px solid #ff6700;margin:100px auto;overflow:hidden;position:relative;}
  5. #box img{position: absolute;top:0px;left:0px;}
  6. #box span{position:absolute;width:100%;height:50%;left:0px;cursor:pointer;}
  7. #box #top{top:0px;}
  8. #box #bottom{bottom:0px;}
  9. </style>

html代码如下：

  1. <div id="box">
  2.     <!-- 658*4066 -->
  3.     <img src="images/timer.jpeg" alt="">
  4.     <span id="top"></span>
  5.     <span id="bottom"></span>
  6. </div>

javascript代码如下：

  1. //1.获取标签
  2. var box =document.getElementById('box');
  3. var pic =document.getElementsByTagName('img')[0];
  4. var divTop =document.getElementById('top');
  5. var divBottom = document.getElementById('bottom');
  6. var num = 0;
  7. var timer = null;
  8. divTop.onmouseover = function(){
  9.     //让图片向上滚动
  10.     clearInterval(timer);
  11.     timer = setInterval(function(){
  12.     num-=10;      
  13.     if(num>=-3666){
  14.         pic.style.top = num+'px';//4066-400=3666
  15.     }else{
  16.         clearInterval(timer);
  17.     }
  18.     },50);
  19. }
  21. divBottom.onmouseover  = function(){
  22.     clearInterval(timer);
  23.     //  让图片向上滚动
  24.     timer = setInterval(function(){
  25.         num += 10;
  26.         if(num <= 0){
  27.             pic.style.top = num + 'px'; 
  28.         }else{
  29.             clearInterval(timer);
  30.         }
  31.     },100);
  32. }
  33. box.onmouseout = function(){
  34.     clearInterval(timer);
  35. }
上一条：Grid栅格布局：实现网站首页布局，实现日历功能下一条：Ajax-post 无刷新分页技术
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多