首页
所有分类
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管中窥豹 形参与实参浅析
Dec 17 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
分词器(1) mediapipe(1) SnakeGame(1) cvzone(1) python小游戏(5) for(1) 计算机视觉(2) 无限迭代(1) while(1) 贪吃蛇(2)
You might like
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
Vue.js项目实战之多语种网站的功能实现（租车）
2019/08/07 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Anaconda入门使用总结
2018/04/05 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
基于python历史天气采集的分析
2019/02/14 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
美国汽车性能部件和赛车零件网站：Vivid Racing
2018/03/27 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
颁奖典礼主持词
2014/03/25 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2020优秀员工演讲稿（三篇）
2019/10/17 职场文书
导游词之江南周庄
2019/12/06 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript