码迷,mamicode.com
首页 > Web开发 > 详细

js常用效果

时间:2014-11-23 01:51:55      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:返回顶部   style   blog   http   io   ar   color   os   使用   

//创建元素
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"})
}
}) 

 

js常用效果

标签:返回顶部   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/liujin0505/p/4116056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!