浅谈jQuery效果函数

2019-11-20 08:59:40

字体：大中小

来源：转载

供稿：网友

jQuery有很多的效果可以实现，比如说淡入淡出的效果：<html>

 <head>    <style>      #box{width:200px;height:200px;background:red;opacity:1;}    </style>  </head>  <body>    <div id="box">    </div>    <input type="button" value="隐藏/显示"id="bt1"><br/><br/>    <input type="button" value="淡入"id="bt2"><br/><br/>    <input type="button" value="淡出"id="bt3"><br/><br/>    <input type="button" value="滑入"id="bt4"><br/><br/>    <input type="button" value="滑出"id="bt5"><br/><br/>    <input type="button" value="半透明"id="bt6"><br/><br/>    <input type="button" value="滑入/滑出"id="bt7"><br/><br/>    <input type="button" value="淡入入/淡出"id="bt7"><br/><br/>  </body>  <script src="jquery-1.6.js"></script>  <script>    $(function(){        $("#bt1").click(function(){              $("#box").toggle(1000)              }),        $("#bt2").click(function(){              $("#box").slideDown(1500)              }),        $("#bt3").click(function(){              $("#box").slideUp(1500)              }),        $("#bt4").click(function(){              $("#box").fadeIn(1000)              }),        $("#bt5").click(function(){              $("#box").fadeOut(1000)              }),        $("#bt6").click(function(){              $("#box").fadeTo(1500,0.4)              }),        $("#bt7").click(function(){              $("#box").fadeToggle(1000)              }),        $("#bt8").click(function(){              $("box").slideToggle(1500)              })        })                  </script></html>

jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>

<head>    <style>      #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}          </style>  </head>  <body>    <div id="box"></div>  </body>  <script src="jquery-1.7.1.min.js"></script>  <script>    $(function(){        str="我是中国人"        $("#box").html(str)        setInterval(go,300)          function go(){            str=str.substr(1)+str.substr(0,1)            $("#box").html(str)            }        })  </script></html>

jQuery可以用来实现一个删除功能的实现,比如：<html>

<head>    <style>      #box{        width:400px;        height:200px;        border:1px solid black;        }    </style>  </head>  <body>    <div id="box">        <p id="a">第一a</p>        <p>第二</p>        <p id="a">第三a</p>        <p>第四</p>    </div>    <button id="del">删除</button>    <button id="cle">清空</button>  </body>  <script src="jquery-1.6.js"></script>  <script>    $(function(){        $("#del").click(            function(){              $("p").remove("#a")              });        $("#cle").click(            function(){              $("#box").empty()              });      })  </script></html>

jQuery还会做出一选课功能的实现,比如:<html>

<head><title></title><style>li{  list-style:none;}#you{  position:absolute;  left:300px;  top:10px;}ul{  position:absolute;  left:150px;  top:10px;}</style><script src="jquery-1.6.js"></script><script>  $(function(){    $("button:first").click(function(){      $("#zuo>option:selected").prependTo($("#you"));      //$("#you").append($("#zuo>option:selected");    })    $("button:eq(1)").click(function(){      $("#you>option:selected").appendTo($("#zuo"));      //$("#you").append($("#zuo>option:selected");    })    $("button:eq(2)").click(function(){      $("#zuo>option").appendTo($("#you"));          })    $("button:eq(3)").click(function(){      $("#you>option").appendTo($("#zuo"));          })    $("button:eq(4)").click(function(){       //$("#zuo>option:first").before($("#zuo>option:selected"))      $("#zuo>option:selected").prependTo($("#zuo"));          })    $("button:eq(5)").click(function(){      // $("#zuo>option:last").after($("#zuo>option:selected"))      $("#zuo>option:selected").appendTo($("#zuo"));          })    $("button:eq(6)").click(function(){     $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;            })    $("button:eq(7)").click(function(){     $("#zuo>option:selected").next().after($("#zuo>option:selected")) ;            })  })</script></head><body><select size="10" id="zuo" style="width:100px">  <option>职业英语</option>  <option>高等数学</option>  <option>大学语文</option>  <option>大学物理</option>  <option>计算机基础</option>  <option>基本网页设计</option>  <option>c语言程序设计</option>  <option>数据结构</option>  <option>UI设计</option>  <option>产品脚本设计</option>  <option>产品脚本提高</option>  <option>产品脚本实战</option></select><ul><li><button>选择</button></li><li><button>退选</button></li><li><button>全选</button></li><li><button>全退</button></li><li><button>置顶</button></li><li><button>置底</button></li><li><button>上移</button></li><li><button>下移</button></li></ul><select size="10" id="you" style="width:100px"></select></body></html>

jQuery还能够实现下滑框功能:<!DOCTYPE html>

<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){  $(".panel").slideDown("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>jQuery能够实现简单的动画效果：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){  $("div").animate({left:'250px'}); });});</script> </head> <body><button>开始动画</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>jQuery能实现一个动画的开始与停止的功能:<html>  <head>    <style>      #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}    </style>  </head>  <body>    <div id="box"></div>    <button id="bt">开始</button>    <button id="bt1">停止</button>  </body>  <script src="jquery-1.6.js"></script>  <script>        $(function(){        $("#bt").click(function(){              $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)              }),        $("#bt1").click(function(){              $("div").stop();              })              })  </script></html>

jQuery还能做一些向上轮播图片广告的功能:<html>

<head>    <style>      #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}      ul{list-style:none;}      img{width:600px;height:300px;}      *{padding:0;margin:0;}    </style>  </head>  <body>        <div id="box">      <ul id="pic">        <li><img src="1.png"></li>        <li><img src="2.png"></li>        <li><img src="3.png"></li>        <li><img src="4.png"></li>        <li><img src="1.png"></li>      </ul>    </div>  </body>  <script src="jquery-1.7.1.min.js"></script>  <script>    $(function(){        m=0;        p=setInterval(go,100)        function go(){            m+=20;            $("#pic").css("margin-top",-m+"px")            if(m>=1200){m=0}            }      })  </script></html>

jQuery还能实现两个下拉展开于闭合的效果于一体的:<!DOCTYPE html>

<html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function() { $("button").click(function(){  $("#p1").css("color","red").slideUp(2000).slideDown(2000); });});</script></head><body><p id="p1">jQuery 乐趣十足！</p><button>点击这里</button></body></html>

以上就是我分享给大家的，谢谢。

关于这篇jQuery效果函数就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：使用JQuery中的trim()方法去掉前后空格

下一篇：jQuery插件easyUI实现通过JS显示Dialog的方法