首页
所有分类
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 浮动导航栏实现代码
Aug 27 Javascript
JavaScript高级程序设计（第3版）学习笔记4 js运算符和操作符
Oct 11 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
REST(1) Mint UI(1) 面向对象(3) cmd(1) exists(2) 相对路径(1) mt-swipe(1) 慢日志(1) openpyxl(1) 相对路径 (1)
You might like
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php对象工厂类完整示例
2018/08/09 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
对python Tkinter Text的用法详解
2018/10/11 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
For Art’s Sake官网：手工制作的奢华眼镜
2018/12/15 全球购物
Smilodox官方运动服装店：从运动服到健身配件
2020/08/27 全球购物
什么是.net
2015/08/03 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
保护动物倡议书
2014/04/15 职场文书
乳制品整治工作方案
2014/05/29 职场文书
上党课的心得体会
2014/09/02 职场文书
讲党性心得体会
2014/09/03 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL