首页
所有分类
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文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
详解angular中的作用域及继承
May 31 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
Vue中axios的封装（报错、鉴权、跳转、拦截、提示）
Aug 20 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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) 表约束(2) caddy(1) NginxConfig(1) 主从复制(1) ESXI(1) SVN(1) Master(1) 骨架屏(1) Slave(1)
You might like
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP JSON出错：Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
一个很酷的拖动层的js类，兼容IE及Firefox
2009/06/23 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
JavaScript indexOf方法入门实例（计算指定字符在字符串中首次出现的位置）
2014/10/17 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
vue组件实例解析
2017/01/10 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
英国最受欢迎的手表网站：Watch Shop
2016/10/21 全球购物
大学军训感言800字
2014/02/27 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
公司放假通知怎么写
2015/04/15 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
python缺失值填充方法示例代码
2022/12/24 Python