js常用效果

时间:2020-12-07 15:16:01
//创建元素
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"})
}
})