jq实现效果代码（jq插件开发与使用）

本篇文章给大家谈谈jq实现效果代码，以及jq插件开发与使用对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、通过JQ怎么实现标签置顶效果
• 2、jQuery如何实现页面加载完毕再去执行代码
• 3、JQuery 鼠标移到一个层上显示另一个层问题
• 4、想用JQ实现一个按住一个图标，div可以上下拖动的效果，请给个详细的JQ和HTML代码，谢谢了
• 5、jquery 怎么实现从右到左滑出来的效果
• 6、jQuery里面隐藏和显示效果怎么写?

通过JQ怎么实现标签置顶效果

var addedLI=$.cookie('addedLI');

if(addedLI!=null||addedLI!=""||addedLI!=undefined){

var strArray=addedLI.split(',');

for(var i=0;istrArray.length;i++){

$("#"+strArray[i]).addClass('act');

// 添加如下：

$("#"+strArray[i]).parent().prepend($("#"+strArray[i]));

}

}

jQuery如何实现页面加载完毕再去执行代码

通过以下方案解决：

解决方案一:

$(document).ready(function(){//代码})

解决方案二:

$(function(){//代码});

解决方案三:

jQuery(document).ready(function(){//代码})

解决方案四:

window.onload=function(){//代码}

解决方案五:

将jquery代码放入body的后面，这样也会实现相同的效果。

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+等。

参考资料

百度百科.百度百科[引用时间2018-1-12]

JQuery 鼠标移到一个层上显示另一个层问题

你好！

第一个问题解决思路：每个一级菜单设置hover事件没有问题，但是你的代码中显示的二级菜单却成为了全局所有的了，所以需要修改为当前一级菜单下面的$(".subCategory")元素，即 $(一级菜单).find(".subCategory")--- 这样才会显示为当前一级菜单下的二级菜单。

第二个问题解决思路：由于hover事件中的动画效果没有得到有效的终止，所以在函数队列中会按顺序执行它们，使用stop函数能够有效的终止它们，并直接返回最后的执行结果。

详见附件吧~

想用JQ实现一个按住一个图标，div可以上下拖动的效果，请给个详细的JQ和HTML代码，谢谢了

网上有插件，我这也有案例代码，要是贴上来就太多了，我以前写了个放windows窗口的效果，你可以参考一下，代码如下，全部复制出去，修改下jquery库的路劲就可以测试：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

title/title

script type="text/javascript" src="jquery.min.js"/script

script type="text/javascript"

$(function(){

//定义各个DOM元素及按钮，obj是整个窗口，objcurs窗口的导航，guan是窗口关闭按钮，xiao是缩小到任务栏按钮，max是最大化窗口按钮

var obj=$('.id'),objcur=$('.nav'),guan=$('.guan'),xiao=$('.xiao'),max=$('.max');

//定义所有变量，tuo为鼠标是否在导航上按下

var tuo=false;

//记录窗口最小最大前的位置及宽高

var lefts,tops,widths,heights;

//这里获取窗口元素的宽高，用于窗口最小最大后还原窗口，但是是有错的，因为窗口在真正的项目中是可以拉大拉小的，而我这里没有开发此功能

widths=obj.width();

heights=obj.height();

var X,Y;

objcur.mousedown(function(e){

X=e.pageX-obj.offset().left;

Y=e.pageY-obj.offset().top;

tuo=true;

})

$(document).mousemove(function(e){

//如果当前窗口为100%则不允许拖动

if(obj.width() == $(document).width()){

tuo=false;

}

if(tuo){

obj.css({

left:e.pageX-X,

top:e.pageY-Y

})

lefts=obj.offset().left;

tops=obj.offset().top;

}

}).mouseup(function(){

tuo=false;

})

//窗口最大化

var shu=0;

//双击导航框缩放窗口

objcur.dblclick(function(){

max.click();

})

//单击缩放按钮缩放窗口

max.click(function(){

if(shu == 0){

obj.animate({

width:'100%',

height:'100%',

left:'0px',

top:'0px'

},200);

shu = 1;

}else if(shu ==1){

obj.animate({

width:widths,

height:heights,

left:lefts,

top:tops

},200);

shu = 0;

}

})

//关闭窗口，也就删除了DOM元素

guan.click(function(){

obj.remove();

})

//缩小到任务栏

var xiaos=1;

xiao.click(function(){

if(xiaos == 1){

var s=$(document).height();//此处获取浏览器可视窗口的高度，也存在问题，当我们的窗口拉到浏览器上或下可视窗口外的时候，那么浏览器可视窗口的高度也被增大了，所以当我们的窗口拉到浏览器可视窗口上或下的外面的时候，我们缩小窗口到任务栏的话就将看不到缩小后的窗口，最简单的办法就是把此变量设置成全局变量，当页面加载的时候此变量就初始化了就不会被窗口拉出的时候增大

obj.animate({

left:'0px',

top:s-24,

width:'150px',

height:'24px'

},200);

xiaos =0;

}else if(xiaos == 0){

obj.animate({

width:widths,

height:heights,

left:lefts,

top:tops

},200);

xiaos =1;

}

})

});

/script

style type="text/css"

html,body{width:100%;height:100%;font-size:12px;overflow:hidden;margin:0px;padding:0px;position:relative;}

.id{width:300px;height:200px;background:red;overflow:hidden;position:absolute;left:0px;top:0px;}

.id p{background:green;cursor:pointer;color:#fff;margin:0px;height:24px;line-height:24px;}

.id p span{float:right;margin-right:5px;background:blue;}

/style

/head

body

div class="id"

p class="nav"按下我才能拖拽

span class="guan"X/span

span class="max"口/span

span class="xiao"--/span

/p

/div

/body

/html

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、jquery.show()和jquery.hide()方法

语法：

$(selector).show(speed,callback);

$(selector).hide(speed,callback);

2、jquery.toggle()方法

语法：

$(selector).toggle(speed,callback);

3、带有淡入淡出效果的显示和隐藏

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeToggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

4、带有滑动效果的显示和隐藏

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

注意：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

关于jq实现效果代码和jq插件开发与使用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。