常用JQ特效代码
/**
* hhBase 平台js
* User: huanhuan
* QQ: 651471385
* Email: th.wanghuan@gmail.com * 微博: huanhuan的天使 * Date: 13-9-1
* Time: 上午10:05
* Dependence jquery-1.7.2.min.js
*/ var fn = {}; //鼠标划过显示隐藏方法
fn._hoverShow = function(infor){
var option = {
id:'',
addClass:'',
showBox:'',
showTriangle:'',
mouseenter:function(){},
mouseleave:function(){}
}
for(var i in infor){
if(option.hasOwnProperty(i)){
option[i] = infor[i];
}
}
$(option.id).on({
'mouseenter' : function(e){
$(this).addClass(option.addClass);
$(this).find('.'+option.showBox).show();
$(this).find('.'+option.showTriangle).show();
option.mouseenter();
},
'mouseleave' : function(e){
$(this).removeClass(option.addClass);
$(this).find('.'+option.showBox).hide();
$(this).find('.'+option.showTriangle).hide();
option.mouseleave();
}
});
}
fn.hoverShow = function(){
fn._hoverShow({
id:$('[data-rule="hoverShow"]'),
addClass:'topmenu-dropdown-hover'
});
fn._hoverShow({
id:$('[data-rule="hoverShow-weixin"]'),
showBox:'topmenu-item-weix',
showTriangle:'weix-triangle'
});
} //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
fn._keyup = function(keys){
var option = {
id:'',
keyup:function(){},
blur:function(){}
}
for(var i in keys){
if(option.hasOwnProperty(i)){
option[i] = keys[i];
}
} $(option.id).each(function(){
var thisVal=$(option.id).val();
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).live({
keyup:function(){
var val=$(this).val();
$(this).siblings("span").hide();
},
blur:function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
}
});
$(this).siblings("span").click(function(){
$(option.id).focus();
});
});
}
fn.keyup = function(){
fn._keyup({id:$('[data-rule="keyTxt"]')});
fn._keyup({id:$('[data-rule="keyPassword"]')});
} //TAB 标签切换
fn._showTab = function(op){
var option ={
id : '',
addClass : '',
showClass : '',
clickrun:function(){}
}
for(var i in op){
if(option.hasOwnProperty(i)){
option[i] = op[i];
}
}
$(option.id).find('li').live({
click:function(){
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.'+option.showClass).eq(index).show().siblings('.'+option.showClass).hide();
option.clickrun();
}
}); }
fn.showTab = function(){
fn._showTab({
id:$('[data-rule="dateTab"]'),
addClass:'current',
showClass:'thSupList'
});
} //文本框 focus blur 方法
fn._placeHolder = function(cfg){
var option = {
id:'',
text:'',
focuscolor:'#000',
blurcolor:'#999',
focusrun:function(){},
blurrun:function(){}
};
for (var i in cfg) {
if (option.hasOwnProperty(i)) {
option[i] = cfg[i];
}
}
$(option.id).live({
focus:function(){
$(this).attr('tempvalue',$(this).val().match(/^\s*(\S+(\s+\S+)*)\s*$/)==null?'':$(this).val().match(/^\s*(\S+(\s+\S+)*)\s*$/)[1]);
if($(this).attr('tempvalue')==option.text){
$(this).val('');
$(this).css('color',option.focuscolor);
}else{
$(this).css('color',option.focuscolor);
}
option.focusrun();
},
blur:function(){
$(this).attr('tempvalue',$(this).val().match(/^\s*(\S+(\s+\S+)*)\s*$/)==null?'':$(this).val().match(/^\s*(\S+(\s+\S+)*)\s*$/)[1]);
if($(this).attr('tempvalue').length<1){
$(this).val(option.text);
$(this).css('color',option.blurcolor);
}
option.blurrun();
}
});
} fn.placeHolder = function(){
fn._placeHolder({id:$('[data-rule="searchQuery"]'),text:'想去哪?'});
fn._placeHolder({id:$('[data-rule="searchMap"]'),text:'想去哪里?'});
} //文本框 focus blur 方法
fn._txtFocus = function(kval){
var option = {
id:'',
hideInput:'',
inputTxt:'',
focus:function(){},
blur:function(){}
}
for(var i in kval){
if(option hasOwnProperty(i)){
option[i] = kval[i];
}
}
$(option.id).on({
'focus':function(){
var mail = $(this).val();
if(mail == option.inputTxt){
$(this).val('');
$(this).css('color','#333');
}
option.focus();
},
'blur':function(){
var mail = $(this).val();
if(mail == ''){
$(this).val(option.inputTxt);
$(this).css('color','#999');
}
option.blur();
}
});
}
fn.txtFocus = function(){
fn._textFocus({id:$('[data-rule="nameTxt"]'),inputTxt:'输入用户名'});
} //密码框文字的显示、隐藏
fn._keyFocus = function(kval){
var option = {
id:'',
hideTd:'',
hideInput:'',
inputTxt:'',
focus:function(){},
blur:function(){}
}
for(var i in kval){
if(option hasOwnProperty(i)){
option[i] = kval[i];
}
}
$(option.id).on({
'focus':function(){
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$('#'+option.hideInput).hide();
$('#thpassword').show().focus();
}
option.focus();
}
}); $(option.hideTd).on({
'blur':function(){
var text_value = $(this).val();
if (text_value == '') {
$('#'+option.hideInput).show();
$(this).hide();
}
option.blur();
}
});
}
fn.keyFocus = function(){
fn._keyFocus({id:$('[data-rule="passwordTxt"]'),hideTd:$('[data-rule="passwordShow"]'),hideInput:$('#showPwd'),inputTxt:'输入密码'});
} //点击显示 其它地方隐藏
fn.pricePrice = function(){
var pricePrice;
$('[data-rule="pricePrice"]').live({
click:function(event){
var T = $(this);
event.stopPropagation();
T.addClass('thFPriceHover');
$(document).bind('click',function(event){
if(!$(event.target).hasClass('thFPbox')){
T.removeClass('thFPriceHover');
}
});
}
});
} //点击显示隐藏 简单树结构
fn._filter = function(cfg){
var option = {
id:'',
parentClass:'',
clickClass:'',
showClass:'',
clickrun:function(){}
};
for (var i in cfg) {
if (option.hasOwnProperty(i)) {
option[i] = cfg[i];
}
}
$(option.id).find('.'+option.clickClass).live({
click:function(event){
if ($(this).parents('.'+option.parentClass).find('.'+option.showClass).is(':visible')){
event.stopPropagation();
if($(this).hasClass('thDevelop')){
$(this).addClass('thPackUp');
}
$(this).parents('.'+option.parentClass).find('.'+option.showClass).hide();
}else{
if($(this).hasClass('thDevelop')){
$(this).removeClass('thPackUp');
}
$(this).parents('.'+option.parentClass).find('.'+option.showClass).show();
}
option.clickrun();
}
});
} fn.filter = function(){
fn._filter({id:$('[data-rule="dateFilter"]'),parentClass:'thFilterBox',clickClass:'thDevelop',showClass:'thDataFilter'});
fn._filter({id:$('[data-rule="serviceFilter"]'),parentClass:'thFilterBox',clickClass:'thDevelop',showClass:'thFilterList'});
fn._filter({id:$('[data-rule="themeFilter"]'),parentClass:'thFilterBox',clickClass:'thDevelop',showClass:'thFilterList'});
fn._filter({id:$('[data-rule="daysTripFilter"]'),parentClass:'thFilterBox',clickClass:'thDevelop',showClass:'thFilterList'});
fn._filter({id:$('[data-rule="destinationsFilter"]'),parentClass:'thFilterBox',clickClass:'thDevelop',showClass:'thFilterList'});
//左侧的树结构调用
fn._filter({id:$('[data-rule="treeFilter"]'),parentClass:'thDestMBot',clickClass:'thTreeToo',showClass:'thDestMsecondary'});
} //日历 调用方法
fn.setDatePickerLanguage = function(){
jQuery(function($){
$.datepicker.regional['zh'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['zh']);
});
} fn.datePickerBind = function(){
$('[data-rule="dataStart"]').datepicker({
defaultDate: "+1w",
onClose: function( selectedDate ) {
$('[data-rule="dataEnd"]').datepicker( "option", "minDate", selectedDate );
}
});
$('[data-rule="dataEnd"]').datepicker({
defaultDate: "+1w",
onClose: function( selectedDate ) {
$('[data-rule="dataStart"]').datepicker( "option", "maxDate", selectedDate );
}
});
} $(function(){
//平台首页设置样式
$('.platFSList dl:even').css('padding-right','40px');
$('.plFIOMain dl:even').css({'padding-right':'18px','border-right':'1px solid #e0e0e0'});
$('.plFIOMain dl:odd').css({'padding-left':'18px'});
$('.platFRagent dl:even').css('padding-right','32px');
$('.platFRaList li').eq(2).nextAll().find('label').addClass('platFRaLnumber00');
//设置最后一个header-nav的css样式
$('.topHeader-nav li:last').css('padding-right','0'); //fn调用方法
for(fname in fn){
if(fname.indexOf('_') == -1){
fn[fname]();
}
}
});
本文转自:http://www.cnblogs.com/huanhuan1989/p/3314466.html#undefined
常用JQ特效代码的更多相关文章
- css常用的特效代码
一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...
- 几款web开发常用jquery特效代码
特效网:http://www.xwcms.net 1.图片拖动特效http://www.xwcms.net/js/tpdm/32946.html2.弹出层焦点图特效:http://www.xwcms ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
- 常用 Java 静态代码分析工具的分析与比较
常用 Java 静态代码分析工具的分析与比较 简介: 本文首先介绍了静态代码分析的基 本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBu ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- Jquery实现手机上下滑屏滑动的特效代码
要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
随机推荐
- Confluent Platform 3.0支持使用Kafka Streams实现实时的数据处理(最新版已经是3.1了,支持kafka0.10了)
来自 Confluent 的 Confluent Platform 3.0 消息系统支持使用 Kafka Streams 实现实时的数据处理,这家公司也是在背后支撑 Apache Kafka 消息框架 ...
- Nginx支持多站点配置小结
如何配置 web 服务器才能在一个 VPS 上放置多个网站/博客呢?如何通过一个 IP 访问多个站点/域名呢?这是大多数 web 服务器支持的 virtual hosting 功能.即一个IP对应多个 ...
- SPOJ SUBST1 后缀数组
题目链接:http://www.spoj.com/problems/SUBST1/en/ 题意:给定一个字符串,求不相同的子串个数. 思路:直接根据09年oi论文<<后缀数组——出来字符串 ...
- POJ 2785 HASH
题目链接:http://poj.org/problem?id=2785 题意:给定n行数字,每行4个数分别是a,b,c,d,现在要求能有多少个(a,b,c,d)组合并且和为0 思路:n^2统计所有(a ...
- 【分块】【树上莫队】bzoj1086 bzoj3052
1086 http://vfleaking.blog.163.com/blog/static/174807634201231684436977/ 3052 http://vfleaking.blog. ...
- Android自动化测试 - MonkeyRunner(二) 锤子便签测试脚本
来源于:http://testerhome.com/topics/878 # encoding=utf-8 #导入python中自带的time模块和sys模块,脚本中都要用到它们. import ti ...
- Android 横屏切换竖屏Activity的生命周期(转)
曾经遇到过一个面试题,让你写出横屏切换竖屏Activity的生命周期.现在给大家分析一下他切换时具体的生命周期是怎么样的: 1.新建一个Activity,并把各个生命周期打印出来 2.运行Acti ...
- kafka storm hbase性能
kafka 单台机器部署 1个partition storm 单台机器部署 hbase 四台机器集群 机器配置大概是4G cpu 4G内存 从kafka 读出到storm,然后flush到hbase ...
- ArrayList和Vector以及synchronizedList
ArrayList和Vector都是使用数组方式存储数据 区别大概就是Vector本身所有方法都是用synchronized修饰的,所以线程安全,而ArrayList没有 还有一个区别就是新增元素的时 ...
- Java 生产者模式 消费者模式
// The standard idiom for calling the wait synchronized(sharedObject) { while(condition){ sharedObje ...