jquery效果代码（jquery 怎样点击两次 不同效果）

本文目录

• jquery 怎样点击两次 不同效果
• jquery怎么实现从右到左滑出来的效果
• 作业求助使用jQuery变换网页效果
• jQuery实现的网页左侧在线客服效果代码
• jquery 中代码
• 默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做
• 急求一个用jquery实现图片自动切换效果的代码，简单详细点的，谢谢

jquery 怎样点击两次 不同效果

很简单的，只用一句代码就能实现：

$("#myid span").on("click",function(){    $(this).toggleClass("myon");//如果默认显示的是myoff，这里就是myon})

原理分析：

span 默认显示的是myoff这个样式，那么当第一次点击的时候，toggleClass就会判断是否包含myon这个样式，如果不包含，就为它添加上“myon”这个样式，这样span的样式就变成了：“《span class=’myoff myon’》”，myon和myoff里有冲突的样式，就会显示myon的样式，当再次点击的时候，就会删除myon这个样式。

就是这么简单！要善用jquery里的 toggle,看下面这篇文章，也是关于“toggle”的一种用法：

网页链接

jquery怎么实现从右到左滑出来的效果

引入jquery.js，复制以下代码，即可运行

1，《style type="text/css"》 

2，.slide { 

3，position: relative; 

4，height: 200; 

5，lightyellow; 

6，} 

7 ，

8，.slide .inner { 

9，position: absolute; 

10，left: 0; 

11，bottom: 0; 

12，height: 100; 

13，lightblue; ,

14，width: 100%

15，} 

16，《/style》

1、slidetoggle() 交替slidedown(),slideup()

Html代码

《div id="slidebottom" class="slide"》 

《button》 

slide it 

《/button》 

《div class="inner"》 

Slide from bottom 

《/div》 

《/div》

Js代码

$(’#slidebottom button’).click(function() { 

$(this).next().slideToggle(); 

});

2、左侧横向交替滑动 Animate Left

Html代码

《div id="slidewidth" class="slide"》 

《button》 

slide it 

《/button》 

《div class="inner"》 

Slide from bottom 

《/div》 

《/div》

Js代码

$("#slidewidth button").click(function(){ 

$(this).next().animate({width: ’toggle’}); 

});

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

Html代码

《div id="slideleft" class="slide" style="width: 50%;float: right"》 

《button》 

slide it 

《/button》 

《div class="inner"》 

Slide from bottom 

《/div》 

《/div》

Js代码

$("#slideleft button").click(function(){ 

var $lefty = $(this).next(); 

$lefty.animate({ 

left:parseInt($lefty.css(’left’),10)==0 ? -$lefty.outerWidth() : 0 

}); 

});

4、右侧横向滑动Slide to right

Html代码

《div id="slidemarginleft" class="slide" style="width: 60%;float: left"》 

《button》 

slide it 

《/button》 

《div class="inner"》 

Slide from bottom 

《/div》 

《/div》

Js代码

$("#slidemarginleft button").click(function(){ 

var $marginlefty = $(this).next(); 

$marginlefty.animate({ 

marginLeft:parseInt($marginlefty.css(’marginLeft’),10)==0 ? $marginlefty.outerWidth() : 0 

}); 

});

作业求助使用jQuery变换网页效果

1. 单击“你是人间的四月天”标题后，标题字体大小、颜色变为蓝色，正文的字体颜色变为绿色，单击“查看全部”显示内容简介,可以确定为点击事件，onclick。

2. 在js事件中这么写， $(’#id’).css({ "font-size": "14px","color":"blue"});

   第一段代码改变字体大小和颜色。

   $(’#id1’).css("color","green");

   第二段代码改变字体颜色

3. 显示简介内容，则判断display即可，点击时设置display为block即可。

   $(’#id’).css("display","block");

jQuery实现的网页左侧在线客服效果代码

本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。运行效果截图如下：在线演示地址如下：***隐藏网址***具体代码如下：《!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"***隐藏网址***《html***隐藏网址***《head》《title》网页左侧浮动jquery在线QQ客服代码《/title》《style》*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}/*QQbox*/.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px000;position:fixed;}*html,*htmlbody{background-image:url(about:blank);background-attachment:fixed;}*html.QQbox{position:absolute;top:expression(eval(document.documentElement.scrollTop));}.QQbox.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}.QQbox.Qlist{float:left;width:410px;background:url(images/bj01.png)no-repeat;background-position:1px0px;height:436px;display:block;overflow:hidden;zoom:1;}.QQbox.Qlist.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}.QQbox.Qlist.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}.QQbox.Qlist.conulli{height:31px;list-style:none;margin-left:35px;}.QQbox.Qlist.conullia{font-size:13px;margin-left:18px;text-decoration:none;}.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)no-repeat;margin-top:-45px;margin-left:220px;}《/style》《scripttype="text/javascript"src="jquery-1.6.2.min.js"》《/script》《/head》《body》《divid="divQQbox"class="QQbox"》《divid="divOnline"class="Qlist"》《divclass="OnlineLeft"》《divclass="con"》《ul》《li》售前咨询《atarget="_blank"href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"》《imgborder="0"***隐藏网址***《li》网站建设《atarget="_blank"href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"》《imgborder="0"***隐藏网址***《li》网站优化《atarget="_blank"href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"》《imgborder="0"***隐藏网址***《li》整合营销《atarget="_blank"href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"》《imgborder="0"***隐藏网址***《li》售后服务《atarget="_blank"href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"》《imgborder="0"***隐藏网址***《/ul》《/div》《/div》《divclass="OnlineBtn"》《/div》《/div》《/div》《scripttype="text/javascript"》$(function(){//建站热线展开效果$("#divQQbox").hover(function(){$(this).stop(true,false);$(this).animate({left:0},300);},function(){$(this).animate({left:-276},149);})});《/script》《/body》《/html》希望本文所述对大家jQuery程序设计有所帮助。

jquery 中代码

* defaultIndex - 默认选中的标签索引从0开始 * titOnClassName - 标签选中时的样式 * titCell - 自定义标题标签, 支持选择符 * mainCell - 自定义标题标签, 支持选择符 * delayTime - 延迟触发时间. 当这个时间小于切换动画效果时间时, 动画将被禁用 * interTime - 自动切换时间. 当这个时间大于0时, 标签将定时自动切换 * trigger - 滑动触发方式. 默认为click, 可选择mouseover * effect - 切换动画. 默认不使用动画. 目前仅提供fade(淡出), slide(向下展开)两种 * omitLinks - 是否忽略带链接标签，默认为否这是个jquery的插件

默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做

这个功能其实很容易实现，我在这告诉你思路一个思路和步骤：

1、把要显示的原样输出，作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏；

2、给查看更多绑定点击事件，点击后show你要展示的内容；

实际代码如下：html 代码

Jquery代码：

扩展资料

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

急求一个用jquery实现图片自动切换效果的代码，简单详细点的，谢谢

推荐一个给你，这是代码，详细的你可以看参考资料$.fn.iFadeSlide = function(iSet){/* * iSet可选参数说明: * iSet.field==》幻灯区域内的图片集 * iSet.ico==》按钮钩子 * iSet.high==》按钮高亮样式 * iSet.interval==》图片切换时间 * iSet.leaveTime==》不触发鼠标划入事件的最大时间值 * iSet.fadeInTime==》淡入时间 * iSet.fadeOutTime==》淡出时间 * 调用方式$(document).iFadeSlide({field:’...’,ico:’...’,...}) */iSet = $.extend({high:’high’,interval:3000,leaveTime:150,fadeOutTime:400,fadeInTime:400},iSet);var imgField = $(iSet.field || ’#slide》img’);var icoField = $(iSet.ico || ’#ico’);var curIndex = 0;var slideInterval = iSet.interval || 3000;var hoverTime = iSet.leaveTime || 150;var fadeOutTime = iSet.fadeOutTime || 400;var fadeInTime = iSet.fadeInTime || 400;var icos=null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null,max=null;;var icoHtml = ’《ul》’;max=imgField.size();//按图片传入对应的按钮imgField.each(function(i){icoHtml += ’《li》’ + (i + 1) + ’《/li》’;});icoHtml += ’《/ul》’;icoField.append(icoHtml);//淡入淡出函数changeFun = function(n){imgField.filter(’:visible’).fadeOut(fadeOutTime, function(){imgField.eq(n).fadeIn(fadeInTime)icos.eq(n).addClass(iSet.high).siblings().removeClass(iSet.high);});}icos = icoField.find(’ul》li’);//为第一个按键初始化高亮icos.first().addClass(iSet.high);//按钮鼠标划入划出事件icos.hover(function(){clearInterval(autoSlideFun);curIndex = icos.index(this);hasIcoHighName = $(this).hasClass(iSet.high);//setTimeout避免用户快速(无意识性划过)划过时触发事件fastHoverFun = setTimeout(function(){//鼠标划入当前图片按钮时不闪烁if (!hasIcoHighName) {changeFun(curIndex);}}, hoverTime);}, function(){clearTimeout(fastHoverFun);//自动切换autoSlideFun = setInterval(function(){curIndex++;changeFun(curIndex);if (curIndex ==max ) {changeFun(0);curIndex = 0;}}, slideInterval)}).eq(0).trigger(’mouseleave’); //当鼠标划入图片区域时停止切换imgField.hover(function(){curIndex = imgField.index(this);clearInterval(autoSlideFun);}, function(){icos.eq(curIndex).trigger(’mouseleave’);});}