原生JavaScript小特效

于 2019-08-10 10:28:18 发布
阅读量327 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： 原生JS 特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45072327/article/details/99057514
这篇博客探讨了如何利用纯JavaScript来创建各种有趣的特效。内容涉及到背景图片的处理，例如使用'纽扣1.png'和'纽扣2.png'等命名规则的图片进行操作，并提供了实际的图片示例作为展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里背景图片命名格式为:纽扣1.png,纽扣2.png
最后有图片示例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
    list-style: none;
   }
   #box{
    width: 90%;
    height: 700px;
    background: dimgray;
    margin: 13px auto;
    position: relative;
   }
   #backgray{
    position: absolute;
    width: 99%;
    height: 90%;
    background: gainsboro;
    top: 1%;
    left: 0.5%;
   }
   .tl,.tr,.bl,.br{
    border: 1px solid dimgray;
    position: absolute;
    width: 5%;
    height: 10%;
   }
   .tl{
    top: 1.8%;
    left: 0.8%;
    border-bottom: none;
    border-right: none;
   }
   .tr{
    top: 1.8%;
    left: 94.2%;
    border-left: none;
    border-bottom: none;
   }
   .bl{
    top: 88%;
    left: 0.8%;
    border-right: none;
    border-top: none;
   }
   .br{
    top: 88%;
    left: 94.2%;
    border-top: none;
    border-left: none;
   }
   #ul1,#ul2{
    width: 80%;
    height: 35%;
    /* border: #000000 1px solid; */
    position: absolute;
    z-index: 1;
   }
   #ul1{
    top: 15%;
    left: 10%;
   
   }
   #ul2{
    margin-top: 10px;
    top: 49%;
    left: 10%;
   }
   li{
    position: absolute;
    float: right;
    display: inline-block;
    border-radius: 50%;
    background-size: 108% 108%;
   }
   #hidden{
    width: 800px;
    height: 600px;
    position: absolute;
    top: -300px;
    left: 150px; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    display: none;
   }
   #hiddentop{
    width: 1000px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -320px;
    left: -250px;
    transform: translateY(-700px);
   }
   #hiddenmin{
    width: 1000px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -310px;
    left: -550px;
    transform: scale(0,0);
   }
   #hiddenlast{
    width: 400px;
    height: 250px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
   }
   #hiddenbox{
    width: 400px;
    height: 250px;
    position: absolute;
    top: -150px;
    left: -545px;
    display: none;
    transform: scale(0);
   }
  </style>
 </head>
 <body>
  <div id="box">
   <div id="backgray">
    <div class="tl"></div>
    <div class="tr"></div>
    <div class="bl"></div>
    <div class="br"></div>
    <ul id="ul1">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul id="ul2">
     <li><div id="hidden" style="background-image: url(img/电视塔.jpg);"></div></li>
     
     <li><div id="hiddentop" style="background-image: url(img/夏.png);"></div></li>
     
     <li><div id="hiddenmin" style="background-image: url(img/冬.png);"></div></li>
     
     <li><div id="hiddenbox"><div id="hiddenlast" style="background-image: url(img/春.jpg);"></div></div></li>
    </ul>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  (function(){
   var box=document.querySelector('#box');
   var ul1=document.querySelector('#ul1'); // 第一行ul
   var ul2=document.querySelector('#ul2'); // 第二行ul
   var liList1=ul1.children; // 第一行li的集合
   var liList2=ul2.children; // 第二行li的集合
   for (i=0;i<liList1.length;i++) {
    liList1[i].style.width=180+'px';
    liList1[i].style.height=180+'px';
    liList1[i].style.position='absolute';
    liList1[i].style.left=(i)*300+'px';
    liList1[i].style.top=5+'px';
    liList1[i].style.marginLeft=0+'px';
    liList1[i].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)'; // 背景图片随机
    liList1[0].onmouseover=function(){
     liList1[0].style.transform='rotate('+360+'deg)'; // 旋转360°
     liList1[0].style.transition='transform 1s linear';
    }
    liList1[0].onmouseleave=function(){
     liList1[0].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)'; // 背景图片随机
     liList1[0].style.transform='rotate('+(0)+'deg)';
    }
    liList1[1].onmouseover=function(){
     liList1[1].style.width=220+'px'; // 宽高改变
     liList1[1].style.height=220+'px';
     liList1[1].style.transition='width 0.5s,height 0.5s';
    }
    liList1[1].onmouseleave=function(){
     liList1[1].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)';
     liList1[1].style.width=180+'px';
     liList1[1].style.height=180+'px';
    }
    liList1[2].onmouseover=function(){
     liList1[2].style.opacity=0;  // "消失"
     liList1[2].style.transition='opacity .5s';
    }
    liList1[2].onmouseleave=function(){
     liList1[2].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)';
     liList1[2].style.opacity=1;
    }
    liList1[3].onmouseover=function(){
     liList1[3].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)'; // 切换图片
     liList1[3].style.transition='background-image 1s';
    }
    liList1[3].onmouseleave=function(){
    }
   }
   
   for (var i=0;i<liList2.length;i++) {
    liList2[i].style.width=180+'px';
    liList2[i].style.height=180+'px';
    liList2[i].style.left=450+'px';
    liList2[i].style.top=5+'px';
    liList2[i].style.marginLeft=0+'px';
    liList2[i].style.backgroundImage='url(img/纽扣'+(Math.round(Math.random()*5+1))+'.png)';
    let hidden=document.querySelector('#hidden');
     let k=true;
     liList2[0].onclick=function(){
      liList2[0].style.width=170+'px';
      liList2[0].style.height=170+'px';
      setTimeout(
       function () {
        liList2[0].style.width=180+'px';
        liList2[0].style.height=180+'px';
       }
      ,100);
      if (k==true) {
       setTimeout(function(){
        hidden.style.opacity=0.9;
        hidden.style.transition='opacity 1s ease-out';
        hidden.style.zIndex=999;
        liList2[1].style.zIndex=0;
        liList2[2].style.zIndex=0;
        liList1[1].style.zIndex=0;
        liList1[2].style.zIndex=0;
        liList1[3].style.zIndex=0;
       },100)
       hidden.style.display='block';
       k=false;
      } else{
       hidden.style.opacity=0;
       liList2[1].style.zIndex=2;
       liList2[2].style.zIndex=1;
       liList1[1].style.zIndex=2;
       liList1[2].style.zIndex=2;
       liList1[3].style.zIndex=2;
       setTimeout(function(){
        hidden.style.display='none';
       },1000)
       k=true;
      }
     }
     var m=true;
     liList2[1].onclick=function(){
      liList2[1].style.width=170+'px';
      liList2[1].style.height=170+'px';
      setTimeout(
       function () {
        liList2[1].style.width=180+'px';
        liList2[1].style.height=180+'px';
       }
      ,100);
      let hiddentop=document.querySelector('#hiddentop');
      hiddentop.style.zIndex=1;
      if (m==true) {
       hiddentop.style.transform='translateY(0)';
       hiddentop.style.transition='transform 1s';
       liList2[3].style.zIndex=0;
       liList2[2].style.zIndex=0;
       liList2[0].style.zIndex=0;
       liList2[0].style.zIndex=0;
       m=false;
      } else if (m==false){
       console.log(111111);
       hiddentop.style.transform='translateY(-700px)';
       liList2[3].style.zIndex=2;
       liList2[2].style.zIndex=2;
       liList2[1].style.zIndex=2;
       liList2[0].style.zIndex=2;
       m=true;
      }
     }
     let n=true;
     liList2[2].onclick=function(){
      liList2[2].style.width=170+'px';
      liList2[2].style.height=170+'px';
      setTimeout(
       function () {
        liList2[2].style.width=180+'px';
        liList2[2].style.height=180+'px';
       }
      ,100);
      let hiddenmin=document.querySelector('#hiddenmin');
      hiddenmin.style.transition='transform 1s';
      hiddenmin.style.zIndex=1;
      if (n==true) {
       hiddenmin.style.transform='scale(1)';
       liList2[3].style.zIndex=0;
       n=false;
      } else{
       hiddenmin.style.transform='scale(0)';
       liList2[3].style.zIndex=2;
       n=true;
      }
     }
     liList2[3].onmouseover=function(){
      liList2[0].style.left=0;   // 一字排开
      liList2[1].style.left=300+'px';
      liList2[2].style.left=600+'px';
      liList2[3].style.left=900+'px';
      liList2[0].style.transition='left 1s';
      liList2[1].style.transition='left 1s';
      liList2[2].style.transition='left 1s';
      liList2[3].style.transition='left 1s';
     }
     let v=true;
     liList2[3].onclick=function(){
      let hiddenbox=document.getElementById('hiddenbox');
      let hiddenlast=document.getElementById('hiddenlast');
      hiddenbox.style.transition='transform 1s';
      hiddenlast.style.transition='transform 1s';
      hiddenbox.style.zIndex=1;
      if (v==true) {
       hiddenbox.style.display='block';
       setTimeout(function(){
        hiddenbox.style.transform='rotate('+-360+'deg)';
        hiddenlast.style.transform='scale(1)';
       },100)
       console.log('true');
       v=false;
      } else{
       hiddenbox.style.transform='rotate('+360+'deg)';
       hiddenlast.style.transform='scale(0)';
       setTimeout(function(){
        hiddenbox.style.display='none';
       },1000)
       console.log('false');
       v=true;
      }
     }
    }
  }());
 </script>
</html>

整体

js原生特效
xxzh_pengpeng的博客
04-12 268
北冥做了个小玩意，构思和算法都很巧妙，小伙伴吧可以瞅瞅哦 话不多说，源码奉上(~+~) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>北冥想当黑客啦</title> <style&...
一些原生的js小特效
InLett_yj的博客
08-12 956
一.这是一个鼠标跟随特效(使用画布) html部分` ` js部分 window.onload = function(){ C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById('c'); c = d.getContext('2d')...
原生JS经典案例特效
10-26
30多套JavaScript的案例库，动画效果。360度全景展示效果，back_评分，back_图片滚动播放，JS简易年历，slide上下滚动条，放大镜简单版，竖排导航，土豆右下角菜单悬浮效果，照片墙一多实例演示_files，back_瀑布流，back_购物车等等..........
原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
weixin_34250434的博客
08-10 481
         在制作网页过程中，我们可能会遇到各种常用的经典网页特效，比如Banner图片滚动、选项卡循环播放、右下角广告弹窗、评论提交展示、选项动态增删、剪刀石头布小游戏等等等。。。是不是感觉都见到过这些场景、那些这些场景都是如何实现的呢？今天，小瑞老师就一口气把所有经典网页特效效果送给大家！！！          全部都是原生JS实现哦~~根本不需要什么JQuery、AngularJS等各...
javascript学习-原生javascript的小特效（简单的运动效果）
weixin_30266829的博客
10-18 231
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一：运动特效（主要是通过改变元素的left,right,height,width,opacity来达到运动的效果） 我们今天做一个利用计时器来创建一个匀速运动的效果，代码很简单。 1:首先我们先写出HTML的结构 <div id="div1"> <span id="share">shar...
原生JavaScript轮播图特效.zip
07-11
原生JavaScript轮播图特效
原生JavaScript实现词云特效.zip
最新发布
08-24
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，...
原生JavaScript实现Tooltip浮动提示框特效
11-29
使用原生JavaScript设计和实现Tooltip浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点： 显示：鼠标移到ToolTip超链接上时，ToolTip提示框可以显示出来 隐藏：鼠标移开时，ToolTip...
基于JQuery和原生JavaScript实现网页定位导航特效
10-20
总结来说，结合jQuery和原生JavaScript实现的网页定位导航特效可以提供良好的用户体验，使用户能够轻松浏览页面各个部分。通过监听滚动事件并根据当前位置调整菜单项的样式，我们可以创建出响应式的导航效果。无论...
原生JavaScript实现的全特效微博发布面板效果实例特效代码
03-20
原生JavaScript实现的全特效微博发布面板效果实例源码是一段完美呈现了网页版新浪微博在发布状态时的效果，并且发布成功的状态还可以在发布面板中呈现，非常不错，本段代码适应于所有网页使用，有需要的朋友们可以...
HTML5+原生javascript卡片展开特效demo
03-20
HTML5+原生javascript卡片展开特效demo,运用css3旋转效果，像扑克展开一样的卡片。
javascript一些小特效
12-20
　日期时间效果，图片文字效果，窗口页面效果，鼠标效果，菜单及状态栏效果，其它
js原生 动态粒子星空特效
12-03
简单的粒子星空特效，使用纯原生js 没有使用任何插件，简单易懂，一看就明白，自己对js+canvas的一些简单的理解
js特效的几个特效例子
10-31
js特效的几个特效例子，附带效果样式。很实用新手用特别适合。
原生js实现创意炫酷动态3D立体文字模型特效.rar
07-01
原生js实现创意炫酷动态3D立体文字模型特效代码下载。支持多种3D图案模型，可自定义文字内容。
javascript学习-原生javascript的小特效（改变透明度效果）
weixin_30378311的博客
10-18 186
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 （ 以下效果兼容IE5+ IE5-以下没有测试哦） 今天为大家演示的效果是一个div，鼠标经过的时候透明度为100%，鼠标移出的时候透明度变为原来的50%。 也许大家会问现在这么多流行的JS框架和CSS3的transition配合伪类:hover都可以实现的效果干嘛要用这么老套的方式呢？没错的，现在用CSS3，JS框...
原生js动画效果（源码解析）
weixin_30709809的博客
10-10 241
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做（比如jquery）,这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！ 1、匀速动画效果 说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...
JavaScript小效果的实现（笔记）
weixin_34061555的博客
02-06 230
在学习一些JavaScript效果，做一些实现效果笔记，顺便整理一下思路。 LightBox效果实现： <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Lightbox效果</title> <sty...
javascript实例——文本特效篇(包含3个小例子)
weixin_33779515的博客
04-26 114
1、标题跑马灯 常常能够在一些新闻网站，或者其他地方，看到文字在一个特定的区域内，来回滚动。一旦超出边界就消失了，那么这些效果是如何做到的呢，今天我们就来讲讲。 图示效果： 源代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&g...
原生JavaScript小球碰撞游戏特效教程
本篇内容将深入探讨相关知识点，包括JavaScript基础、游戏开发涉及的技术点以及特效实现等方面。 ### JavaScript基础 JavaScript是一种面向对象的解释型编程语言，它能够让静态的HTML网页变得生动起来。JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值