您的位置:首页 > Web前端 > JavaScript

js常用效果

2014-11-23 00:51 316 查看
//创建元素
var txt1="<p style='color:red'>我是由HTML创建的</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("我是由JQuery创建的");                   // 以 jQuery 创建新元素
txt2.css({"color":"blue"}) ;                                  // JQuery CSS
var txt3=document.createElement("p");
txt3.innerHTML="我是由DOM创建的.";                            // 通过 DOM 来创建文本
txt3.style.color="green";                                     // DOM CSS
$("body").append(txt1,txt2,txt3);                                   // 追加新元素

//右键菜单
$(document).bind("contextmenu",function(e){
return false;
});

//获得鼠标指针XY值
$(document).mousemove(function(e){
$('#xy').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

//jQuery延时加载功能
window.setTimeout(function() {
// do something
}, 1000);

//使元素居屏幕中间位置
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

//.当图片没有正确引用时使用默认的图片
$("img").error(function () {
$(this).unbind("error").attr("src", "http://s0.hao123img.com/res/img/logo/logonew.png");
});

//.回到顶部效果
$(window).scroll(function() {   //返回顶部
if ($(this).scrollTop() > 150){
$('#top').fadeIn(1000);
} else {
$('#top').fadeOut(1000);
}
});

$('#top').click(function(event) {
$("html,body").animate({scrollTop: 0}, 2000);
})

//回到底部
$("#toBottom").click(function () {
$("html,body").animate({ "scrollTop":$(document).height()}, 1000);
});

$(window).scroll(function(){     //左侧浮动广告
$("#left").stop(true,false).delay(200).animate({top:$(window).scrollTop()+250},"slow")
})
$(window).scroll(function(){    //中间固定定位
if($(this).scrollTop()>100){
$("#center").css({"position":"fixed","top":"0px"})
}else{
$("#center").css({"position":"absolute","top":"100px"})
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: