//创建元素
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常用效果的更多相关文章

  1. JS - 常用效果代码库 (四)

    1.首字母大写示例: var value = “一段文本或一个参数”; value = value.toString() return value.charAt(0).toUpperCase() + ...

  2. JS 常用功能收集

    JS 常用效果收集 1. 回到顶部>>    爱词霸

  3. jS事件之网站常用效果汇总

    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...

  4. Js常用技巧

    摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...

  5. Node.js 常用工具

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherit ...

  6. js常用的400个特效

    JavaScript实现可以完全自由拖拽的效果,带三个范例     http://www.sharejs.com/showdetails-501.aspx javascript实现可以自由拖动的树形列 ...

  7. Node.js 常用工具util包

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.isError(obj); util.is ...

  8. js常用框架

    JS常用框架:jQuery.Prototype.MooTools 参考:w3cshool jQuery jQuery 是目前最受欢迎的 JavaScript 框架. 它使用 CSS 选择器来访问和操作 ...

  9. js 常用功能实现(函数)

    1.10 个短小实用的代码片段 :https://www.jianshu.com/p/3ef822ec5a63 2.js常用函数  : https://www.cnblogs.com/wangyuyu ...

随机推荐

  1. verilog 双向IO实现

    网上搜索了一番,示例挺多,但发现都写的是 input in; output out; 然后  assign io= (oe)?out:1'bz;就有点想不明白了,当IO方向为输出时,应该输出out的值 ...

  2. xrdp远程 & watchdog 启用与测试 & WebRTC

    sudo apt-get install xrdp sudo apt-get install vnc4server tightvncserver echo "xfce4-session&qu ...

  3. 《University Calculus》-chaper13-多重积分-二重积分的计算

    之前关于二重积分的笔记,介绍了二重积分概念的引入,但是对于它的计算方法(化为累次积分),介绍的较为模糊,它在<概率论基础教程>中一系列的推导中发挥着很重要的作用. 回想先前关于二重积分的几 ...

  4. UVa 11825 集合dp

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  5. jquery 使用方式记录

    1.监听键盘事件 $("#id").keyup(function(event){ if(event.keyCode == 13){ $("#btn_addgoods_su ...

  6. Very simple problem - SGU 111(大数开方)

    分析:使用的是构造新数字法进行不断构造,然后逼近每一位数字,然后使用c++徒手敲了240多行代码,竟然过了........................很有成就感. 代码如下: ========== ...

  7. Spring 的注册与注入

    之前和同学老是爱混淆注册与注入.今天再看一遍感觉多了一些理解. 注册就是声明bean.就是让spring能够找到这个bean服务. 注入就是把bean(A)加入到另一个bean(B)的属性中.让另外一 ...

  8. Groovy新手教程

    Groovy新手教程 kmyhy@126.com  2009-5-13 一.groovy是什么 简单地说,Groovy 是下一代的java语言,跟java一样,它也执行在 JVM 中. 作为跑在JVM ...

  9. SQLLite 简介

    [1] SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内 ...

  10. 初步掌握HDFS的架构及原理

    目录 HDFS 是做什么的 HDFS 从何而来 为什么选择 HDFS 存储数据 HDFS 如何存储数据 HDFS 如何读取文件 HDFS 如何写入文件 HDFS 副本存放策略 Hadoop2.x新特性 ...