美化博客之实际操作

                                                                               　　　　　　鼠标点击特效

 1.心形效果

<!-- 为页面添加爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
    var hearts = [];
    
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }

    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
    
})(window,document);
</script>
View Code

2.文字效果

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
View Code

3.烟花效果

<!--给WordPress网站添加鼠标点击爆炸五颜六色特效-->
    <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://www.ixianzong.com/wp-content/themes/begin/js/djtx.js"></script>
View Code

 

　　　　　　　　　　　　　　　　　　　　　　　　　　  鼠标移动特效

1.蒲公英效果

 

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
    <title>鼠标特效</title> 
</head>
<body>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script >
    var a_idx=0;
    jQuery(document).ready(function($){
      addTips = function(e){
        var a= new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var i=$("<span />").text(a[a_idx]);
        a_idx=(a_idx+1)%a.length;
        var x=e.pageX,y=e.pageY;
        i.css({
          "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
          "top":y-20,
          "left":x,
          "position":"absolute",
          "font-weight":"bold",
          "color":"#ff6651"
        });
 
        $("body").append(i);
        i.animate({"top": y-180,"opacity":0},1500,function(){i.remove()})
        return false;
      }
      //绑定鼠标左键
      $("body").click(addTips);
      //绑定鼠标左键
      $("body").bind("contextmenu",addTips)
  });
    </script>
    <script>
      function o(w,v,i){
          return w.getAttribute(v)||i
      }
      function j(i){
          return document.getElementsByTagName(i)
      }
      function l(){
          var i=j("script"),w=i.length,v=i[w-1];
          return {l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}
      }
      function k(){
          r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
          n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
      }
      function b(){
          e.clearRect(0,0,r,n);
          var w=[f].concat(t);
          var x,v,A,B,z,y;
          t.forEach(function(i){
              i.x+=i.xa,
              i.y+=i.ya,
              i.xa*=i.x>r||i.x<0?-1:1,
              i.ya*=i.y>n||i.y<0?-1:1,
              e.fillRect(i.x-0.5,i.y-0.5,1,1);
              for(v=0;v<w.length;v++){
                  x=w[v];
                  if(i!==x&&null!==x.x&&null!==x.y){
                      B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;
                      y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())
                  }
              }
              w.splice(w.indexOf(i),1)
          }),m(b)
      }
      var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,
      m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){
          window.setTimeout(i,1000/45)
      },
      a=Math.random,f={x:null,y:null,max:20000};
      u.className="particle_canvas";
      var browserName = navigator.userAgent.toLowerCase();
      if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
          u.className += ' ie10_gte';
      };
      u.id=c;
      u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;
      j("body")[0].appendChild(u);
      k(),window.onresize=k;
      window.onmousemove=function(i){
          i=i||window.event,
          f.x=i.clientX,
          f.y=i.clientY
      },
      window.onmouseout=function(){
          f.x=null,
          f.y=null
      };
      for(var t=[],p=0;s.n>p;p++){
          var h=a()*r,
          g=a()*n,
          q=2*a()-1,
          d=2*a()-1;
          t.push({x:h,y:g,xa:q,ya:d,max:6000})
      }
      setTimeout(function(){b()},100)
    </script>
    <style>
  .github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
  @keyframes octocat-wave {
    0%, 100% {
      transform: rotate(0)
    }
    20%, 60% {
      transform: rotate(-25deg)
    }
    40%, 80% {
      transform: rotate(10deg)
    }
  }
  @media (max-width:500px) {
    .github-corner:hover .octo-arm {
      animation: none
    }
    .github-corner .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }
  }
</style>
</body>
</html>
View Code

 

2.蜘蛛网效果

<!DOCTYPE HTML>
<html>  
<head>                 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<title>动态鼠标蜘蛛网特效</title>            

</head>
<body> 

</body>
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>　
<script>
!
function() {
    function n(n, e, t) {
        return n.getAttribute(e) || t
    }
    function e(n) {
        return document.getElementsByTagName(n)
    }
    function t() {
        var t = e("script"),
        o = t.length,
        i = t[o - 1];
        return {
            l: o,
            z: n(i, "zIndex", -1),
            o: n(i, "opacity", .5),
            c: n(i, "color", "0,0,0"),
            n: n(i, "count", 99)
        }
    }
    function o() {
        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
    function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function(i, x) {
            for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
            null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
        }),
        x(i)
    }
    var a, c, u, m = document.createElement("canvas"),
    d = t(),
    l = "c_n" + d.l,
    r = m.getContext("2d"),
    x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(n) {
        window.setTimeout(n, 1e3 / 45)
    },
    w = Math.random,
    y = {
        x: null,
        y: null,
        max: 2e4
    };
    m.id = l,
    m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
    e("body")[0].appendChild(m),
    o(),
    window.onresize = o,
    window.onmousemove = function(n) {
        n = n || window.event,
        y.x = n.clientX,
        y.y = n.clientY
    },
    window.onmouseout = function() {
        y.x = null,
        y.y = null
    };
    for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
        g = w() * c,
        v = 2 * w() - 1,
        p = 2 * w() - 1;
        s.push({
            x: h,
            y: g,
            xa: v,
            ya: p,
            max: 6e3
        })
    }
    u = s.concat([y]),
    setTimeout(function() {
        i()
    },
    100)
} ();
</script>
</html>
View Code

 

posted @ 2020-08-14 09:41  月下的魔术师0310  阅读(133)  评论(0)  编辑  收藏  举报