首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

浅谈jQuery效果函数

Posted in Javascript onSeptember 16, 2016

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效果函数

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 #Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 #Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 #Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 #Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 #Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 #Javascript
jQuery中show与hide方法用法示例
Sep 16 #Javascript
决心书(42) 主持词(345) 请假条(31) 责任书(145) 承诺书(369) 建议书(203) 广告词(105) 活动总结(790) 倡议书(159) 聘任书(31)
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
js原型链与继承解析（初体验）
2016/05/09 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Python压缩和解压缩zip文件
2015/02/14 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
利用python绘制正态分布曲线
2021/01/04 Python
CSS3实现缺角矩形，折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
外语系毕业生找工作的求职信
2013/11/28 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
重阳节活动主持词
2015/07/04 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python