js常用效果
//创建元素
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常用效果的更多相关文章
- JS - 常用效果代码库 (四)
1.首字母大写示例: var value = “一段文本或一个参数”; value = value.toString() return value.charAt(0).toUpperCase() + ...
- JS 常用功能收集
JS 常用效果收集 1. 回到顶部>> 爱词霸
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
- Js常用技巧
摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...
- Node.js 常用工具
Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherit ...
- js常用的400个特效
JavaScript实现可以完全自由拖拽的效果,带三个范例 http://www.sharejs.com/showdetails-501.aspx javascript实现可以自由拖动的树形列 ...
- Node.js 常用工具util包
Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.isError(obj); util.is ...
- js常用框架
JS常用框架:jQuery.Prototype.MooTools 参考:w3cshool jQuery jQuery 是目前最受欢迎的 JavaScript 框架. 它使用 CSS 选择器来访问和操作 ...
- js 常用功能实现(函数)
1.10 个短小实用的代码片段 :https://www.jianshu.com/p/3ef822ec5a63 2.js常用函数 : https://www.cnblogs.com/wangyuyu ...
随机推荐
- 打开本地html的一些设置
解决:打开本地html,提示:此网站窗口向您索取信息,如果信任此网站,请单击此处允许脚本窗口 工具-internet选项-安全-自定义级别-脚本-允许网站试用脚本窗口提示获取信息 选择启用 工具-In ...
- 使用doxygen生成注释文档
1. doxygen下载地址:http://www.stack.nl/~dimitri/doxygen/ 2. 参考http://wenku.baidu.com/link?url=ETvBUyaR9f ...
- 2013=7=29 nyist 13题
Fibonacci数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递归地 ...
- JAVA wait(), notify(),sleep详解
转自: http://blog.csdn.net/zyplus 在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是, ...
- libcurl 使用的几个注意事项
注:libcurl 入门指南( the tutorial ): http://curl.haxx.se/libcurl/c/libcurl-tutorial.html 0. 为使用的curl url ...
- linux下切割catalina.out文件,按天生成文件
1.下载工具cronolog压缩包(http://download.csdn.net/detail/sunling_sz/8144469) 2.将文件拖放到server,不论什么文件夹都能够. 3.进 ...
- soapUI的使用
首先下载soapUI下载地址在网上能够搜的到 windows下载这个soapUI-x32-3_5.exe(中间的数字是版本,能够下载最新的,这个已经有了JMS的測试功能) 首先得有一个webser ...
- springmvc 例
1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...
- android 57 QQ登录
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- GDB踪函数的完整调用过程 及原理
http://www.lenky.info/archives/2013/02/2202 Breakpoint , .so. (gdb) bt # .so. # .so. # .so. # .so. # ...