5 JS交互特效案例实战
Posted 风hua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5 JS交互特效案例实战相关的知识，希望对你有一定的参考价值。
JS交互特效案例实战
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> </head> <body> <!-- 4 1 4 --> <img src="images/image01.jpg" id="flower" width="200" height="200"> <br> <button id="prev">上一张</button> <button id="next">下一张</button> <script type="text/javascript"> // 1.获取事件源 需要的标签 var flower = document.getElementById(\'flower\'); var nextBtn = document.getElementById(\'next\'); var prevBtn = document.getElementById(\'prev\'); var minIndex = 1,maxIndex = 4; currentIndex = minIndex; // 2.监听按钮的点击 nextBtn.onclick = function(){ if(currentIndex === maxIndex){ // 到最后一张了 currentIndex = minIndex; }else{ currentIndex++; } flower.setAttribute(\'src\',`images/image0${currentIndex}.jpg`) } prevBtn.onclick = function(){ if(currentIndex === minIndex){ // 到最后一张了 currentIndex = maxIndex; }else{ currentIndex--; } flower.setAttribute(\'src\',`images/image0${currentIndex}.jpg`) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn">隐藏</button> <br> <img src="images/img01.jpg" id="new"> <script type="text/javascript"> // 1.获取事件源 var obtn = document.getElementById(\'btn\'); var newImg = document.getElementsByTagName(\'img\')[0]; // var isShow = true; // 2.绑定事件 obtn.onclick = function(){ // 3.事件驱动程序 if(obtn.innerHTML === \'隐藏\'){ newImg.style.display = \'none\'; obtn.innerHTML = \'显示\'; // isShow = false; }else{ newImg.style.display = \'block\'; obtn.innerHTML = \'隐藏\'; // isShow = true; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03 衣服相册</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; overflow: hidden; } ul li{ float: left; width: 50px; height: 50px; margin-left: 10px; margin-top: 20px; border: 2px solid #fff; } ul li.active{ border-color: red; } </style> </head> <body> <img src="images/1.jpg" id="bigImg"> <ul> <li class="active"> <a href=""> <img src="images/1.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/2.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/3.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/4.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/5.jpg" width="46" class="smallImg"> </a> </li> </ul> <script type="text/javascript"> // 1.获取事件源 var bigImg = document.getElementById(\'bigImg\'); var smallImgs = document.getElementsByClassName(\'smallImg\'); for(var i = 0; i < smallImgs.length; i++){ //2. 遍历集合，给每个img标签添加事件 smallImgs[i].onmouseover = function(){ // 3.事件处理程序 // 3.1 在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值 for(var j = 0; j < smallImgs.length; j++){ smallImgs[j].parentNode.parentNode.setAttribute(\'class\', \'\'); } // 3.2修改大图的src属性值 var smallImgSrc = this.getAttribute(\'src\'); bigImg.setAttribute(\'src\',smallImgSrc); // 3.3 给鼠标悬浮的img标签的父标签添加类 this.parentNode.parentNode.setAttribute(\'class\', \'active\'); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04 关闭小广告</title> <style type="text/css"> *{ padding: 0; margin: 0; } #qe_code{ width: 180px; height: 160px; margin: 100px auto; position: relative; } #qe_code img{ position: absolute; right: 0; } #qe_code #close{ position: absolute; width: 18px; height: 18px; border: 1px solid #e0e0e0; text-align: center; line-height: 18px; cursor: pointer; color: #666; } </style> </head> <body> <div id="qe_code"> <img src="images/phone_taobao.png" id="code"> <span id="close">X</span> </div> <script type="text/javascript"> var closeSpan = document.getElementById(\'close\'); var qe_code = document.getElementById(\'qe_code\'); closeSpan.onclick = function(){ qe_code.style.display = \'none\'; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url(\'images/big_pic1.jpg\') no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li id="item1"> <img src="images/pic1.jpg"> </li> <li id="item2"> <img src="images/pic2.jpg"> </li> <li id="item3"> <img src="images/pic3.jpg"> </li> <li id="item4"> <img src="images/pic4.jpg"> </li> <li id="item5"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 初学者 小白 书写的方式 var item1 = document.getElementById(\'item1\'); var item2 = document.getElementById(\'item2\'); var item3 = document.getElementById(\'item3\'); var item4 = document.getElementById(\'item4\'); var item5 = document.getElementById(\'item5\'); var oBox = document.getElementById(\'box\'); item1.onmouseover = function(){ oBox.style.background = `url(\'images/big_pic1.jpg\') no-repeat` } item2.onmouseover = function(){ oBox.style.background = `url(\'images/big_pic2.jpg\') no-repeat` } item3.onmouseover = function(){ oBox.style.background = `url(\'images/big_pic3.jpg\') no-repeat` } item4.onmouseover = function(){ oBox.style.background = `url(\'images/big_pic4.jpg\') no-repeat` } item5.onmouseover = function(){ oBox.style.background = `url(\'images/big_pic5.jpg\') no-repeat` } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url(\'images/big_pic1.jpg\') no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li id="item1"> <img src="images/pic1.jpg"> </li> <li id="item2"> <img src="images/pic2.jpg"> </li> <li id="item3"> <img src="images/pic3.jpg"> </li> <li id="item4"> <img src="images/pic4.jpg"> </li> <li id="item5"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 初学者 小白 书写的方式 // 1.获取事件源 /* var item1 = document.getElementById(\'item1\'); var item2 = document.getElementById(\'item2\'); var item3 = document.getElementById(\'item3\'); var item4 = document.getElementById(\'item4\'); var item5 = document.getElementById(\'item5\'); var oBox = document.getElementById(\'box\'); */ // 1.获取事件源 function $(id){ return typeof id === \'string\' ? document.getElementById(id) : null; } function changebgcImg(liId,imgSrc){ // 2.添加事件 $(liId).onmouseover = function(){ // 3.改变背景图 $(\'box\').style.background = imgSrc; } } changebgcImg(\'item1\',`url(\'images/big_pic1.jpg\') no-repeat`); changebgcImg(\'item2\',`url(\'images/big_pic2.jpg\') no-repeat`); changebgcImg(\'item3\',`url(\'images/big_pic3.jpg\') no-repeat`); changebgcImg(\'item4\',`url(\'images/big_pic4.jpg\') no-repeat`); changebgcImg(\'item5\',`url(\'images/big_pic5.jpg\') no-repeat`); /* $(\'item1\').onmouseover = function(){ oBox.style.background = `url(\'images/big_pic1.jpg\') no-repeat` } $(\'item2\').onmouseover = function(){ oBox.style.background = `url(\'images/big_pic2.jpg\') no-repeat` } $(\'item3\').onmouseover = function(){ oBox.style.background = `url(\'images/big_pic3.jpg\') no-repeat` } $(\'item4\').onmouseover = function(){ oBox.style.background = `url(\'images/big_pic4.jpg\') no-repeat` } $(\'item5\').onmouseover = function(){ oBox.style.background = `url(\'images/big_pic5.jpg\') no-repeat` } */ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url(\'images/big_pic1.jpg\') no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li class="item"> <img src="images/pic1.jpg"> </li> <li class="item"> <img src="images/pic2.jpg"> </li> <li class="item"> <img src="images/pic3.jpg"> </li> <li class="item"> <img src="images/pic4.jpg"> </li> <li class="item"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 1.获取事件源 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.index = i+1; items[i].onmouseover = function(){ $(\'box\').style.background = ` url(\'images/big_pic${this.index}.jpg\') no-repeat`; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08 百度换肤</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #skin{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(\'images/skin1.jpg\'); background-position: center 0; background-repeat: no-repeat; } #skin-photo{ width: 100%; height: 100px; position: relative; z-index: 10 } #skin-photo ul{ overflow: hidden; width: 1200px; margin: 0 auto; background-color: rgba(255,255,255,.5); } #skin-photo ul li{ float: left; cursor: pointer; height: 120px; margin: 10px 0 10px 96px; } #skin-photo ul li img{ width: 180px; height: 120px; } </style> </head> <body> <div id="skin"></div> <div id="skin-photo"> <ul> <li> <img src="images/skin1.jpg"> </li> <li> <img src="images/skin2.jpg"> </li> <li> <img src="images/skin3.jpg"> </li> <li> <img src="images/skin4.jpg"> </li> </ul> </div> <script type="text/javascript"> // 1.获取对应的图片 var skin = document.getElementById(\'skin\'); var allItems = document.getElementsByTagName(\'li\'); for(var i = 0; i < allItems.length; i++){ allItems[i].index = i + 1; allItems[i].onclick = function(){ skin.style.backgroundImage = ` url(\'images/skin${this.index}.jpg\')` } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09 千千音乐盒</title> <style type="text/css"> *{ padding: 0; margin: 0; } #panel{ background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 400px; padding: 20px; 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> <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; } // 1.获取所有的复选框 var inputs = document.getElementsByTagName(\'input\'); // 2.全选 $(\'allSelect\').onclick = function(){ for(var i = 0; i < inputs.length; i ++){ inputs[i].checked = true; } } // 3.取消选中 $(\'cancelSelect\').onclick = function(){ for(var i = 0; i < inputs.length; i ++){ inputs[i].checked = false; } } // 4.反选 $(\'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>
