首页
所有分类
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 相关文章推荐
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
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
塑料(1) 大脑(1) 美国航天局(1) 数据(1) NASA(1) 毅力号(1) 酶(1) 天问一号(1) 富碳陨石(1) 火星(2)
You might like
php 求质素（素数） 的实现代码
2011/04/12 PHP
PHP 无限分类三种方式 非函数的递归调用！
2011/08/26 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
php创建sprite
2014/02/11 PHP
PHP的引用详解
2015/02/22 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
javascript 闭包
2011/09/15 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
易程科技软件测试笔试
2013/03/24 面试题
采购文员岗位职责
2013/11/20 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
承诺书格式
2014/06/03 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers