网页特效

轻松解决网站大部分特效展示问题

SuperSlide Swiper Swiper-github

拖拽排序图片

模仿360首页导航Div排序插件

jquery 拖拽排序

鼠标点击网页出现爱心特效

(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);

TouchSlide

TouchSlide

触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等

点击鼠标，图片落在鼠标点击的位置

<img src="images/beetle.gif" id="pic" style="visibility:hidden;position:absolute">
<script type="text/javascript">
    function show(){
        pic.style.left = event.x + "px";
        pic.style.top  = event.y + "px";
        pic.style.visibility = "visible";
    }
    document.onclick = show;
</script>

鼠标移到文字上，出现提示信息

• 使用title属性

  <a href="#" title="提示信息">超链接文字</a>

• 自定义事件和自定义样式

  <div id="tip" >这是提示信息</div>
  <a href="#" onMouseOver="mm()" onmouseout="tip.style.visibility='hidden'">超链接文字</a>

  a:link{text-decoration: none;}
  #tip{
      background:#fcfcfc;
      position:absolute;
      width:auto;
      height:auto;
      visibility:hidden;
      font-size: 12px;
      border:1px solid #ccc;
      padding: 2px 6px;
      border-radius:4px;
      box-shadow: 2px 4px 7px #ccc;
  } 

  <script type="text/javascript">
      function mm(){  
          tip.style.visibility='visible';
          tip.style.top = (event.y+10) + "px";
          tip.style.left = (event.x+10) + "px";
      }
  </script>

按←↑→↓键移到图片位置

<img id="pic" src="images/beetle.gif" style="position:absolute;left:100px;top:100px;">
<script type="text/javascript">
    function move(){
        var key = event.keyCode;
        var x = parseInt(pic.style.left);
        var y = parseInt(pic.style.top);
        var step = 10;
        if (key == 37)  pic.style.left = x - step + "px";
        if (key == 38)  pic.style.top  = y - step + "px";
        if (key == 39)  pic.style.left = x + step + "px";
        if (key == 40)  pic.style.top  = y + step + "px";

        console.log(key)
        console.log(x)
        console.log(y)
    }
    document.onkeydown=move;
</script>

文字滚动效果

<marquee direction ="left" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount=3>JavaScript特效制作最新JavaScript特效常用HTML标签讲解ASP入门教程Dreamweaver 8 教程
</marquee>

使用鼠标拖到图片到相应位置

<img src="images/beetle.gif"  style="position:absolute;left:0px;top:0px;" onMouseDown="dragImage(this)">
<script type="text/javascript">
    var down = false;
    var x,y,imgID;

    function dragImage(obj){
        imgID = obj;
        x = event.x - parseInt(imgID.style.left);
        y = event.y - parseInt(imgID.style.top);

        down=true;
    }

    function cancelDrag(){  down=false; }

    function moveImage(){
        if(down){
            //要加上单位“px”，不然图片不能移动
            imgID.style.left  = (event.x - x) + "px";
            imgID.style.top   = (event.y - y) + "px";   

            event.returnValue = false;
        }
    }

    document.onmousemove = moveImage;
    document.onmouseup = cancelDrag;
</script>

跟随鼠标移动的文字

tpanorama-全景图

github地址

效果预览

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： LQbank
• 本文链接： http://example.com/2021/01/19/网页特效/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！