简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第四章 JS特效
Blogger Information
Blog 22
fans 0
comment 1
visits 17853
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第四章 JS特效
刘静的博客
Original
748 people have browsed it

第四章 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. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！