jQuery UI加入效果
1、设计源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加入效果</title>
<link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/themes/base/jquery.ui.all.css">
<script src="../js/jquery-ui-1.10.4/development-bundle/jquery-1.10.2.js"></script>
<script src="../../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.effect.js"></script>
<link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/demos/demos.css">
<style>
.effect{
width: 500px;
height: 300px;
position: relative;
}
.effect-content{
width: 200px;
height: 100px;
font-size: 40px;
border: 1px solid #FF0000;
color: #00FF00;
padding: 10px;
}
.divClass{
text-indent: 10px;
letter-spacing: 20px;
width: 300px;
height: 200px;
padding: 10px;
font-size: 50px;
font-weight: bolder;
}
#btn{
width: 200px;
height: 100px;
font-size: 30px;
cursor: pointer;
}
</style>
<script>
$(function(){
$("#btn").click(function(){
$(".effect-content").addClass("divClass",2000,callFunc); return false;
}); var callFunc = function(){
setTimeout(function(){
$(".effect").removeClass("divClass");
},2000);
}
});
</script>
</head>
<body>
<div class="effect">
<div class="effect-content ui-corner-all" >
上下左右
</div>
</div>
<button id="btn" class="ui-state-default ui-corner-all">效果</button>
</body>
</html>
2、实现结果
（1）初始化
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
（2）点击按钮后
jQuery UI加入效果的更多相关文章
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了
在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...
- jQuery UI -- Repeater & 手风琴(Accordion)效果
jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jquery ui 与 easy ui同时引入 展示效果冲突的问题
jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件
- jquery ui 怎么实现tab标签切换效果
1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
随机推荐
- Tkinter 计算器
from tkinter import * master = Tk() frame = Frame(master) frame.pack(padx=10,pady=10) v1 = StringVar ...
- pythn抓取网页小例子
import urllib.request import re from tkinter import * win = Tk() win.geometry('500x300+400+300') t = ...
- AC日记——病毒侵袭 hdu 2896
2896 思路: 好题: 代码: #include <queue> #include <cstdio> #include <cstring> using names ...
- mvc路由问题
概述 使用MVC Routing可以不必将URL映射到网站中特定文件.通过添加Routing规则,使URL能够安装指定的规则发送HTTP请求,这种方式能够简洁.方便.有效.快速的实现对指定页面的访问或 ...
- 曼哈顿距离、欧几里得距离、闵氏距离(p→∞为切比雪夫距离)
曼哈顿距离: 是由十九世纪的赫尔曼·闵可夫斯基所创词汇 ,是种使用在几何度量空间的几何学用语,用以标明两个点在标准坐标系上的绝对轴距总和. 曼哈顿距离——两点在南北方向上的距离加上在东西方向上的距离, ...
- Gitlab运维
安装Gitlab 新建 /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=gitlab-ce baseurl=http://mirrors.tuna.t ...
- RPD Volume 168 Issue 4 March 2016 评论4
Non-vascular interventional procedures: effective dose to patient and equivalent dose to abdominal o ...
- POJ 3728 The merchant（并查集+DFS）
[题目链接] http://poj.org/problem?id=3728 [题目大意] 给出一棵树,每个点上都可以交易货物,现在给出某货物在不同点的价格, 问从u到v的路程中,只允许做一次买入和一次 ...
- [CF819B]Mister B and PR Shifts
题意:定义一个排列$p_{1\cdots n}$的“偏移量”$D=\sum _{i=1}^n\left|p_i-i\right|$ 求它所有的轮换排列中偏移量最小的是多少,要求输出轮换序数 暴力就是求 ...
- 【差分约束系统】【spfa】UVALive - 4885 - Task
差分约束系统讲解看这里:http://blog.csdn.net/xuezhongfenfei/article/details/8685313 模板题,不多说.要注意的一点是!!!对于带有within ...