js选中飞上去的效果 js 选中元素

jQuery 怎么实现让一个元素飞向另一个元素？

要想使用animate这个方法，首先要了解一下这个方法的参数，这个方法主要有两类参数

animate(params,options);

params:主要是动画属性和终值的样式属性和及其值的集合

options:就比较多了包括

duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

complete (Function) : 在动画完成时执行的函数

step (Callback) :

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

--------------------------------------------------------------------------------------------------------------------

下面举几个例子来说明他们：

$("p").animate({

height: 'toggle', opacity: 'toggle'

}, { duration: "slow" });

这是让段落的高度和不透明度切换

$("p").animate({

left: 50, opacity: 'show'

}, { duration: 500 });

-------------------------------------------------------------

而你想要的效果是让一个元素飞向另一个：那么我写了如下的代码（仅供参考）

!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="js/jquery-1.6.min.js"/script

style type="text/css"

#block{

border:1px red solid;

position:relative;}

/style

/head

body

button id="go" Run/button

div id="block"Hello!/div

script type="text/javascript"

$(document).ready(function(){

$("#go").click(function(){

$("#block").animate({top:"+200px",left:"+300px",width:"200px"}, {duration:2000} );

});

});

/script

/body

/html

我写的这个小例子就是你要飞向，你可以看看，希望对你有所帮助，要想真正了解animate最好是看一下，JQ的源码，关于animate的定义：

animate: function( prop, speed, easing, callback ) {

var optall = jQuery.speed(speed, easing, callback);

if ( jQuery.isEmptyObject( prop ) ) {

return this.each( optall.complete, [ false ] );

}

return this[ optall.queue === false ? "each" : "queue" ](function() {

// XXX 'this' does not always have a nodeName when running the

// test suite

if ( optall.queue === false ) {

jQuery._mark( this );

}

var opt = jQuery.extend({}, optall),

isElement = this.nodeType === 1,

hidden = isElement jQuery(this).is(":hidden"),

name, val, p,

display, e,

parts, start, end, unit;

// will store per property easing and be used to determine when an animation is complete

opt.animatedProperties = {};

for ( p in prop ) {

// property name normalization

name = jQuery.camelCase( p );

if ( p !== name ) {

prop[ name ] = prop[ p ];

delete prop[ p ];

}

val = prop[name];

if ( val === "hide" hidden || val === "show" !hidden ) {

return opt.complete.call(this);

}

if ( isElement ( name === "height" || name === "width" ) ) {

// Make sure that nothing sneaks out

// Record all 3 overflow attributes because IE does not

// change the overflow attribute when overflowX and

// overflowY are set to the same value

opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

// Set display property to inline-block for height/width

// animations on inline elements that are having width/height

// animated

if ( jQuery.css( this, "display" ) === "inline"

jQuery.css( this, "float" ) === "none" ) {

if ( !jQuery.support.inlineBlockNeedsLayout ) {

this.style.display = "inline-block";

} else {

display = defaultDisplay(this.nodeName);

// inline-level elements accept inline-block;

// block-level elements need to be inline with layout

if ( display === "inline" ) {

this.style.display = "inline-block";

} else {

this.style.display = "inline";

this.style.zoom = 1;

}

}

}

}

// easing resolution: per property opt.specialEasing opt.easing 'swing' (default)

opt.animatedProperties[name] = jQuery.isArray( val ) ?

val[1]:

opt.specialEasing opt.specialEasing[name] || opt.easing || 'swing';

}

if ( opt.overflow != null ) {

this.style.overflow = "hidden";

}

for ( p in prop ) {

e = new jQuery.fx( this, opt, p );

val = prop[p];

if ( rfxtypes.test(val) ) {

e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();

} else {

parts = rfxnum.exec(val);

start = e.cur();

if ( parts ) {

end = parseFloat( parts[2] );

unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );

// We need to compute starting value

if ( unit !== "px" ) {

jQuery.style( this, p, (end || 1) + unit);

start = ((end || 1) / e.cur()) * start;

jQuery.style( this, p, start + unit);

}

// If a +=/-= token was provided, we're doing a relative animation

if ( parts[1] ) {

end = ((parts[1] === "-=" ? -1 : 1) * end) + start;

}

e.custom( start, end, unit );

} else {

e.custom( start, val, "" );

}

}

}

// For JS strict compliance

return true;

});

},

鲜少老师

求一段js代码，功能大概是鼠标经过div时，这个图片从旁边飞入

有个简单的思路，首先给图片先css定义飞入动画@keyframes，然后隐藏display:none。

js方法：鼠标移入div然后img出现show即可。

$("div").mouseover(function(){

$("img").show();

});

js如何实现导航栏鼠标点击选中后的效果

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div：hover{ css;} 3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下： a.先给div添加一个选中的样式比如on{css}； b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on'); }) 这是jquery自带的一个方法，点击div切换2个class,

关于js选中飞上去的效果和js 选中元素的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。