jQuery 网页特效编程

rain · 发表于 2014-11-21 20:47:24

$(function(){

$('#div1').hover(function(){                                     定义一个移入效果和一个移出效果

//$(this).css('background','blue');

//$('#div2').hide(3000);                               隐藏

//$('#div2').fadeOut(1000);  //默认400       变淡

//$('#div2').slideUp();                                  上卷

$('#div2').fadeTo(1000,0.5);                         定义变淡程度

},function(){

//$(this).css('background','red');

//$('#div2').show(3000);

//$('#div2').fadeIn(1000);

//$('#div2').slideDown();

$('#div2').fadeTo(1000,1);

});

});

rain · 发表于 2014-11-21 13:39:17

拖拽效果

$(function(){

var disX = 0;
var disY = 0;

$('div').mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;

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

$('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY);

});

$(document).mouseup(function(){

$(document).off();

});

return false;

});

});

rain · 发表于 2014-11-20 23:46:59

本帖最后由 rain 于 2014-11-21 00:00 编辑

//div2.offsetLeft

      //alert( $('#div2').offset().left );  //获取到屏幕的左距离

      alert( $('#div2').position().left );  //到有定位的父级的left值,把当前元素转化成类似定位的形式

//alert( $('input').val() ); 提取值
//$('input').val(456);       赋值

//alert( $('li').size() );  //4 像length

$('li').each(function(i,elem){ //一参：下标二参 : 每个元素

$(elem).html(i);

rain · 发表于 2014-11-20 23:04:40

rain · 发表于 2014-11-20 18:01:19

当调整浏览器窗口的大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

rain · 发表于 2014-11-20 14:29:42

弹窗效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>

$(function(){

//var oDiv = $('<div>div</div>');
//$('body').append( oDiv );

$('#input1').click(function(){

var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');

$('body').append( oLogin );

oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );

$('#close').click(function(){

oLogin.remove();

});

$(window).on('resize scroll',function(){

oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );

});

});

});

</script>
</head>

<body style="height:2000px;">
<input type="button" value="点击" id="input1" />

</body>
</html>

rain · 发表于 2014-11-20 00:37:47

本帖最后由 rain 于 2014-11-20 00:40 编辑

$('div').remove();    删除div节点

$('div').click(function(){
            alert(123);

$('div').on('click',function(){
            alert(123);                   和上面一样的效果，但是可以针对自定义的事件

$('div').on('click mouseover',function(){
            alert(123);
      });                可以一个事件写多个操作

$('div').on({
            'click' : function(){
                     alert(123);
            },
            'mouseover' : function(){
                     alert(456);
            }
      });    点击弹出123，鼠标经过弹出456

off()取消操作
$('div').on('click mouseover',function(){
            alert(123);
            $('div').off('mouseover');
      });  取消鼠标移动操作

$(window).scrollTop()          获取滚动距离

rain · 发表于 2014-11-20 00:01:26

.addClass() 添加属性
$('div').addClass('box2 box4');
removeClass() 删除属性

width() 宽度
alert( $('div').width() );  //width
alert( $('div').innerWidth() );  //width + padding
alert( $('div').outerWidth() );  //width + padding + border
alert( $('div').outerWidth(true) );  //width + padding + border + margin

$('span').insertBefore( $('div') );    剪切到div的前面
$('div').insertAfter( $('span') );    把div剪切粘贴到span的后面
$('div').appendTo( $('span') );    把div剪切粘贴到span里面靠后位置
$('div').prependTo( $('span') );    把div剪切粘贴到span里面最开始位置
before() after()  append() prepend()
意思差不多，//区别：后续操作变了
//$('span').insertBefore( $('div') ).css('background','red'); 对span加样式

$('div').before( $('span') ).css('background','red'); div的前面必须是span，对div加样式

rain · 发表于 2014-11-19 17:11:48

jquery中show()、hide()的例子，一个显示一个隐藏，可以让元素灵活地动起来哦。

Jquery的show()方法和hide()方法，在不带任何参数的情况下，相当于css(“display”,”none/block/inline”)，可以立即隐藏或显示匹配的元素，不会有任何动画。

如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字“slow”。
jQuery代码：
$("element").show("slow");
运行该代码后，元素将在600毫秒内慢慢的显示出来。
其它的速度关键字还有”normal“和”fast“（长度分别是400毫秒和200毫秒）。

不仅如此，还可以为显示速度指定一个数字，单位是毫秒。

例如，使元素在1秒钟（1000毫秒）内显示出来；
$(”element").show(1000);

在前面的例子中，把其中的hide()方法改为hide(600),show()方法改为show(600)。

jQuery代码：

复制代码代码示例:
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().hide(600);
}, function () {
$(this).next().show(600);
})
});
hide(600)方法会同时减少“内容”的高度、宽度和不透明度，直至3个属性的值为0，最后设置该元素的CSS规则为“display:none”。

同理，show(600)方法则会从上到下增大“内容”的高度，从左到右增大“内容”的宽度，同时增加“内容”的不透明度，直至新闻内容完全显示。

rain · 发表于 2014-11-19 15:27:00

做一个选项卡：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
/*window.onload = function(){
var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var aCon = oDiv.getElementsByTagName('div');

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

aInput[i].index = i;

aInput[i].onclick = function(){

for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aCon[i].style.display = 'none';
}

this.className = 'active';
aCon[this.index].style.display = 'block';

};
}

};*/

$(function(){

$('#div1').find('input').click(function(){

$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');

$(this).attr('class','active');

$('#div1').find('div').eq( $(this).index() ).css('display','block');

});

});
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
</html>

		自动登录	找回密码
密码			立即注册

jQuery 网页特效编程

浏览过的版块