jQuery效果函数
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 效果函数
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jQuery 效果函数（三）
方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数(仍未运行)设置延迟 de ...
- jquery 动画总结（主要指效果函数）
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...
- jQuery的效果函数
jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- Jq_选择器、效果函数
JQuery 选择器 选择器 实例 选取 * ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
随机推荐
- iOS-app发布新版本步骤
1
- 书.Windows网络与通信程序设计
1.PDF&源码 保存到了 我的网盘fivez79513-->"PDF&源码" 目录中 “Windows网络与通信程序设计(第2版) 完整带书签PDF+源码. ...
- 最新 三六零java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.三六零等10家互联网公司的校招Offer,因为某些自身原因最终选择了三六零.6.7月主要是做系统复习.项目复盘.LeetCo ...
- 日常工作问题解决：centos7下配置网卡以及查询网卡UUID
目录 1.配置网卡 1.1 网卡查看命令:ifconfig -a 1.2 网卡配置文件说明 1.3 重启网络服务 2.查看确认网卡UUID 2.1 网卡配置文件正常时 2.2 网卡配置文件不可用或者配 ...
- S2. Android 常用控件
[概述] Button(普通按钮):点击事件处理 Toast(消息提示) Menu(菜单): Menu + Fragment 实现菜单切换 [Button] 在 MainActivity 对应的布局文 ...
- [转帖]linux bash环境变量简单总结
linux bash环境变量简单总结 来源链接:http://www.178linux.com/8005 原创文章,如有转载,请注明原文地址 需要简单学习一下. 其实 我都是直接放一个 .sh文件到 ...
- superset的安装（win10）踩踩坑！AWSL
基本安装参考https://www.jianshu.com/p/8b27ff71429f 按此方案装的时候会遇到各种flask版本不兼容的问题,所以 第一步:装好anaconda 第二部:保证好高于V ...
- nginx设置导航&安装showdoc&创建文件服务&zabbix&grafana
安装环境: [root@nginx showdoc]# cat /etc/centos-release #系统版本 CentOS Linux release 7.5.1804 (Core) [root ...
- Maven配置、使用
一:什么是Maven Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven提供了开发人员构建一个完整的生命周期框架,开发人员可以自动完成 ...
- BZOJ4698 SDOI2008Sandy的卡片（后缀自动机）
差分后即求多串LCS.先考虑两个串怎么做.对第一个串建SAM,第二个串在上面跑即可,任意时刻走到的节点表示的都是第二个串的当前前缀在第一个串中出现的最长的后缀,具体计算长度时每走一个字符长度+1,跳f ...