html中的那些炫酷吊炸天的操作

1.evanyou 效果-彩带的实现,效果如下

 

注:这个主要用的是 Canvas 画布实现的,点击背景绘制新的图形,代码如下: 

/*Html代码:*/
<canvasid="evanyou" width="1920" height="934"></canvas>
/*CSS代码:*/
<styletype="text/css">
  #evanyou{
      position:fixed;
      width:100%;
      height:100%;
      left:0;
      top:0;
  }
</style>

/*JS代码:*/
//evanyou效果
      var c = document.getElementById('evanyou'),
          x = c.getContext('2d'),
          pr = window.devicePixelRatio || 1,
          w = window.innerWidth,
          h = window.innerHeight,
          f = 90,
          q,
          m = Math,
          r = 0,
          u = m.PI * 2,
          v = m.cos,
          z = m.random;
      c.width = w * pr;
      c.height = h * pr;
      x.scale(pr, pr);
      x.globalAlpha = 0.6;
      function evanyou() {
          x.clearRect(00, w, h)
          q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }]
          while (q[1].x < w + f) d(q[0], q[1])
      }
      function d(i,j) {
          x.beginPath()
          x.moveTo(i.x, i.y)
          x.lineTo(j.x, j.y)
          var k = j.x + (z() * 2 - 0.25) * f,
              n = y(j.y)
          x.lineTo(k, n)
          x.closePath()
          r -= u / -50
          x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u/ 3) * 127 + 128 << 8 | v(r + u/ 3 * 2) * 127 + 128).toString(16)
          x.fill()
          q[0] = q[1]
          q[1] = { x: k, y: n }
      }
      function y(p) {
          var t = p + (z() * 2 - 1.1) * f
          return (t > h || t < 0) ? y(p) : t
      }
      document.onclick = evanyou
      document.ontouchstart = evanyou
      evanyou();

 

View Code

 2. 返回顶部特效(滚动条上移或者点击会自动隐藏和显示),效果如下:

 

//Html代码:
body>
  <!--回到顶部-->
  <div id="back-to-top" class="red" data-scroll="body" style="top:-46px;color:red;">回到顶部 </div>
<!--撑开网页代码-->
  <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
  <p>hello</p><p>hello</p><p>hello</p>
  <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
      <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
      <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<!--以上是撑开网页代码-->
//CSS样式
#back-to-top{          
           position:fixed;
           right:50px;
           z-index:9;
           width:70px;
           height:900px;
          background:url('/Content/Images/scroll.png');
           transition:0.5s;  
           cursor:pointer;     
      }
//JS部分:
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
      window.onload = function () {
          // 利用 data-scroll 属性,滚动到任意 dom 元素
          $.scrollto = function (scrolldom, scrolltime) {
              $(scrolldom).click(function () {
                  var scrolltodom =$(this).attr("data-scroll");
                  $(this).addClass("active").siblings().removeClass("active");
                  $('html, body').animate({
                      scrollTop: $(scrolltodom).offset().top
                  }, scrolltime);
                  return false;
              });
          };
          //判断位置控制 返回顶部的显隐
          if ($(window).width() > 800) {//如果窗体的宽度大于800
              var backTo = $("#back-to-top");//获取back-to-top对象
              var backHeight = $(window).height() - 980 + 'px';//让window高度减980
              $(window).scroll(function () {
                  if ($(window).scrollTop()> 700 && backTo.css('top') === '-900px') {
                     backTo.css('top', backHeight);
                  }
                  else if ($(window).scrollTop()<= 700 && backTo.css('top') !== '-900px') {
                     backTo.css('top''-900px');
                  }
              });

          }
          //启用
          $.scrollto("#back-to-top"800);

      }
  </script>

 

View Code

3. 左下角探头效果

 

 

PS:这个图片在网页的左下角,鼠标移动上去探头效果,代码如下

//Html代码
<div class="xm">
      <img src="/Content/Images/xiaomai.png" />
  </div>
//CSS代码
<style>
      .xm{
          position:fixed;
          bottom:0;
          left:0;
          z-index:1;
          font-size:0;
          transition:all .3s ease-in-out;          
          transform:translateY(3px);          
      }
      .xm:hover{
          -webkit-transform:translateY(0);
          -ms-transform:translateY(0);
      }
      .xm img{
          width:50px;
      }
  </style>

 

View Code

4. 文字翻转效果(点击翻转,一开始加载页面也翻转)

 

代码如下:

//Html代码
<header class="header-description">
      <div id="site-header">
          <h1>
              <a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a>
          </h1>
          <p class="typed"><a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a><span class="typed-cursor">|</span></p>
      </div>
  </header>
//CSS代码
 <style type="text/css">
      #site-header {
          font-size40px !important;
          font-weight700;
          z-index1;
          text-align: center;
          position: relative;
          top180px;
          font-family: kilsonburg,"Avenir Next",Helvetica,Arial,"LantingheiSC","MicrosoftYaHei",sans-serif;
          font-size34px;
          text-shadow0 1px 1px #47456d;
          margin-bottom130px;
          animation: show-site-title 1s ease-out;
          -o-animation: show-site-title 1s ease-out;
          -moz-animation: show-site-title 1s ease-out;
          -webkit-animation: show-site-title 1s ease-out;
      }
          #site-header h1 {
              display: none;
          }
          #site-header a {
              color#fff;
              font-weight400;
          }
      body {
          background-color:#0094ff;
      }

  </style>

//Script部分
 $(document).ready(function($) {
          $(".typed a").typed({
              strings: ["这里是地狱之门", "日月君地带"],
              typeSpeed: 30,
              backSpeed: 30,
              backDelay: 700
          });
      });       

//PS:需要引入两个文件:一个是jquery-1.8.2.min.js文件,一个是
//typed.min.js文件(PS:自定义的,下面会贴出来)

 

View Code

typed.min.js 代码:

!function (t) { "usestrict"var s = function (s, e) { this.el = t(s), this.options = t.extend({},t.fn.typed.defaults, e), this.isInput = this.el.is("input"), this.attr = this.options.attr, this.showCursor = this.isInput ? !1 : this.options.showCursor, this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(), this.contentType= this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, this.stringsElement= this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0this.arrayPos = 0this.stopNum = 0this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0this.stop = !1this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence =[], this.build() }; s.prototype = { constructor: s, initfunction () { var t = this; t.timeout =setTimeout(function () { for (var s = 0; s < t.strings.length; ++s)t.sequence[s] = s; t.shuffle && (t.sequence =t.shuffleArray(t.sequence)), t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos) }, t.startDelay) }, buildfunction () { var s = thisif (this.showCursor === !0 && (this.cursor = t('<spanclass="typed-cursor">' + this.cursorChar + "</span>"), this.el.after(this.cursor)), this.stringsElement) {s.strings = [], this.stringsElement.hide(); var e = this.stringsElement.find("p"); t.each(e, function (e, i) {s.strings.push(t(i).html()) }) } this.init() }, typewritefunction (t, s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.typeSpeed, i= this; i.timeout =setTimeout(function () { var e = 0, r = t.substr(s); if ("^" === r.charAt(0)) { var o = 1/^\^\d+/.test(r) &&(r = /\d+/.exec(r)[0], o+= r.length, e = parseInt(r)), t = t.substring(0, s) + t.substring(s + o) } if ("html" ===i.contentType) { var n = t.substr(s).charAt(0); if ("<" === n || "&" === n){ var a = "", h = ""for (h = "<" === n ? ">" : ";";t.substr(s).charAt(0)!== h;) a += t.substr(s).charAt(0), s++; s++, a += h } } i.timeout = setTimeout(function () { if (s ===t.length) { if (i.options.onStringTyped(i.arrayPos),i.arrayPos === i.strings.length - 1 && (i.options.callback(),i.curLoop++, i.loop === !1 || i.curLoop === i.loopCount)) return; i.timeout =setTimeout(function () { i.backspace(t, s) }, i.backDelay) } else { 0 === s&& i.options.preStringTyped(i.arrayPos); var e = t.substr(0, s + 1); i.attr ?i.el.attr(i.attr, e) : i.isInput ? i.el.val(e) : "html" === i.contentType ? i.el.html(e) :i.el.text(e), s++, i.typewrite(t, s) } }, e) }, e) } }, backspacefunction (t,s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.backSpeed, i= this; i.timeout =setTimeout(function () { if ("html" === i.contentType && ">" ===t.substr(s).charAt(0)){ for (var e = """<" !==t.substr(s).charAt(0) ;)e -= t.substr(s).charAt(0), s--; s--, e += "<" } var r = t.substr(0, s); i.attr ?i.el.attr(i.attr, r) : i.isInput ? i.el.val(r) : "html" === i.contentType ? i.el.html(r) :i.el.text(r), s > i.stopNum ? (s--, i.backspace(t, s)) : s <= i.stopNum&& (i.arrayPos++, i.arrayPos === i.strings.length ? (i.arrayPos = 0, i.shuffle&& (i.sequence = i.shuffleArray(i.sequence)), i.init()) :i.typewrite(i.strings[i.sequence[i.arrayPos]], s)) }, e) } }, shuffleArrayfunction (t) { var s, e, i =t.length; if (i) for (; --i;) e= Math.floor(Math.random() * (i+ 1)), s = t[e], t[e]= t[i], t[i] = s; return t }, resetfunction () { var t = this;clearInterval(t.timeout); var s = this.el.attr("id"); this.el.after('<span id="' + s + '"/>'), this.el.remove(), "undefined" != typeof this.cursor&& this.cursor.remove(), t.options.resetCallback() } }, t.fn.typed = function (e) { return this.each(function () { var i = t(this), r = i.data("typed"), o = "object" == typeof e &&e; r || i.data("typed", r = new s(this, o)), "string" == typeof e && r[e]() }) },t.fn.typed.defaults = { strings: ["These are the default values...""You know whatyou should do?""Use your own!""Have a great day!"], stringsElementnulltypeSpeed0startDelay0backSpeed0shuffle: !1backDelay500loop: !1loopCount: !1showCursor: !0cursorChar"|"attrnullcontentType"html"callbackfunction () { }, preStringTypedfunction () {}, onStringTypedfunction () { }, resetCallbackfunction () { } } }(window.jQuery);

 

View Code

5. 在离开网页时,触发事件(这里以改变标题为例)


注:这里鼠标移开时,同时改变网页 title 和 icon 图标,代码如下

//Head部分
<head>
  <meta name="viewport" content="width=device-width" />
  <title>IT发烧友,一个真正的技术交流群</title>
  <link rel="shortcuticon" href="/Content/Images/icon.png">
</head>
//JS部分
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script>
      window.onload = function () {
          var OriginTitile = document.title;
          var titleTime;
          document.addEventListener('visibilitychange'function () {
              if (document.hidden) {
                  $('[rel="shortcuticon"]').attr('href'"/Content/Images/fail.ico");
                  document.title = '(●—●)喔哟,崩溃啦!';
                 clearTimeout(titleTime);
              }
              else {
                  $('[rel="shortcuticon"]').attr('href'"/Content/Images/icon.png");
                  document.title = '(/≧▽≦/)咦!又好了!' +OriginTitile;
                  titleTime =setTimeout(function () {
                      document.title =OriginTitile;
                  }, 2000);
              }
          });
      }
  </script>

 

View Code

6. 移入网页时改变鼠标的样式


PS:这个只要在样式里面设置即可,也就是移入时显示一张图片,代码如下:

//css如下所示
 <style>
      abbracronymaddressappletarticleasideaudiobbigblockquotebodycanvascaptioncentercitecodedddeldetailsdfndldtemembedfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhtmliframeimginskbdlabellegendlimarkmenunavobjectoloutputppreqrubyssampsectionsmallspanstrikestrongsubsummarysuptabletbodytdtfootththeadtimetrttuulvarvideo {
          margin0;
          padding0;
          cursorurl('/Content/Image/cursor.ico'),auto;
      }
  </style>

 

View Code

7. 文字向上滚动效果(PS:鼠标悬停停止滚动)


代码如下:

//HTML代码
<divalign="center" id="demo">
          <div id="demo1">
          我是滚动内容<br/>
          你来抓我啊<br/>
          嗖嗖嗖<br/>
          2333333333333333333333333
          </div>
          <div id="demo2"></div>
      </div>    
//CSS代码:
#demo{
          overflow:hidden;
          height:200px;
          width:250px;
          border:1px solid #6699cc;
          font-size:14px;
          color:#336699;
          line-height:22px;
          text-align:left;
          padding:10px;
      }
//JS代码:
var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  var speed=30;//滚动速度值,值越大速度越慢
  var nnn=200/demo1.offsetHeight;
  for(i=0;i<nnn;i++){demo1.innerHTML+="<br/>"+ demo1.innerHTML}
demo2.innerHTML= demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
  if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
      demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
  else{
      demo.scrollTop++     //如果是横向的 将 所有的 height top改成 width left
  }
}
var MyMar =setInterval(Marquee,speed);        //设置定时器
demo.οnmοuseοver= function(){clearInterval(MyMar)}   //鼠标经过时清除定时器达到滚动停止的目的
demo.οnmοuseοut= function(){MyMar =setInterval(Marquee,speed)}    //鼠标移开时重设定时器

 

View Code

8. 鼠标移入效果


PS:鼠标移入,使区域旋转变色

//Style样式
<link href="~/Content/amazeui.min.css" rel="stylesheet" />
<style type="text/css">
      #XuanZhuan li{
          width:200px;
          height:50px;
          background-color:pink;
          margin-left:15px;
          position:relative;
          float:left;
          list-style:none;
          margin-top:15px;
      }
      div{
          width:470px;         
      }
      #XuanZhuan li:hover{
          cursor:pointer;
      }
  </style>
//Html标签
<div>
      <ul id="XuanZhuan">
          <li>
              11111111111111111
          </li>
          <li>
              222222222222222
          </li>
         <li>
             333333333333333
         </li>
          <li>
            4444444444444444
          </li>
      </ul>
  </div>
//Script
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
      //在友情链接页面,鼠标放在li上,li旋转效果
      $(function () {
          $("#XuanZhuan li").hover(function () {
              $(this).css("background-color""yellow");
              $(this).attr("class""am-animation-spin");
          }, function () {
              $(this).css("background-color""pink");
              $(this).attr("class""");
          });
      })       
  </script>

 

9. 旋转星空,点击放烟花效果 

 

实现代码:

//Html代码
<div>
      <canvas id="canvas"></canvas>
      <canvas id="snow"></canvas>

      <div class="am-g" style="position: fixed; bottom:0px;">
          <div class="am-u-sm-12">
              <div style="z-index: 9999" id="player" class="aplayer">
              </div>
          </div>
      </div>
  </div>
//CSS代码
 canvas{
          position: fixed;
          width: 100%;
          height: 100%;
          z-index: -1;
      }
//引入JS
<script src="~/Content/assets/js/jquery.min.js"></script>   
  <script src="~/Scripts/Blog/universe.js"></script><!--旋转背景-->
  <script src="~/Scripts/Blog/Fireworks.js"></script><!--点击放烟花-->

 

View Code

universe.js

var canvas= document.getElementById('canvas'),
       ctx = canvas.getContext('2d'),
       w = canvas.width = window.innerWidth,
       h = canvas.height = window.innerHeight,

       hue = 217,
       stars = [],
       count = 0,
       maxStars = 1300;//星星数量

var canvas2= document.createElement('canvas'),
 ctx2= canvas2.getContext('2d');
canvas2.width= 100;
canvas2.height= 100;

var half =canvas2.width / 2,
 gradient2= ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025'#CCC');
gradient2.addColorStop(0.1'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1'transparent');

ctx2.fillStyle= gradient2;
ctx2.beginPath();
ctx2.arc(half,half, half, 0Math.PI * 2);
ctx2.fill();

//End cache

function random(min, max) {
  if (arguments.length < 2) {
      max = min;
      min = 0;
  }

  if (min > max){
      var hold = max;
      max = min;
      min = hold;
  }

  return Math.floor(Math.random() * (max -min + 1)) +min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter/ 2;
  //星星移动范围,值越大范围越小,
}

var Star = function () {

  this.orbitRadius =random(maxOrbit(w, h));
  this.radius = random(60this.orbitRadius)/ 8;
  //星星大小
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed =random(0, maxStars);
  this.speed = random(this.orbitRadius)/ 50000;
  //星星移动速度
  this.alpha = random(210) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw= function () {
  var x = Math.sin(this.timePassed)* this.orbitRadius+ this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle=== 1 && this.alpha > 0) {
      this.alpha -= 0.05;
  } else if (twinkle=== 2 && this.alpha < 1) {
      this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2this.radius, this.radius);
  this.timePassed+= this.speed;
}

for (var i = 0; i < maxStars;i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.5//尾巴
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
  ctx.fillRect(00, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length;i < l; i++) {
      stars[i].draw();
      canvas2.style.cssText = "display:none";
  };

  window.requestAnimationFrame(animation);
}


animation();

 

 

10. 点击弹出指定的内容 

PS:点击弹出显示内容,过一会自动消失, 说白了也就是一个弹出内容插件,比 alert 好看些,代码如下

//Html代码
<input type="button" value="显示获取到的内容" id="btn1"/>
//JS代码
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script src="~/Scripts/layer/layer.js"></script>
  <script type="text/javascript">
      $(function () {
          $("#btn1").click(function () {
              layer.msg("我是弹出的内容");
          });
      })
  </script>

 

利用上面的插件还可以实现 confirm 选择效果

实现代码:

layer.confirm('确定要删除?', { icon3title'提示' }, function () {
                  alert("当然确定了~");
                  
              });


  • 11
    点赞
  • 75
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值