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 ...
随机推荐
- C++Primer第5版学习笔记(二)
C++Primer第5版学习笔记(二) 第三章的重难点内容 这篇笔记记录了我在学习C++常用基本语法的学习过程,基本只记录一些重难点,对概念的描述不是一开始就详尽和准确的,而是层层深入 ...
- hdu 4474 大整数取模+bfs
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4474 (a*10+b)%c = ((a%c)*10+b%c)%c; 然后从高位开始枚举能填的数字填充, ...
- Google表单
本博文的主要内容有 .Google表单的介绍 https://www.google.com/intl/zh-CN/forms/about/ 自行去注册Google账号,不多,赘述.
- 403. Frog Jump
做完了终于可以吃饭了,万岁~ 假设从stone[i]无法跳到stone[i+1]: 可能是,他们之间的距离超过了stone[i]所能跳的最远距离,0 1 3 7, 从3怎么都调不到7: 也可能是,他们 ...
- nginx安装lua-nginx-module模块
转载注明地址:http://www.cnblogs.com/dongxiao-yang/p/5312285.html 本文主要采用手动源码安装的方式将lua-nginx模块编译到nginx源码内部 一 ...
- windows下 tomcat7 配置成服务
最简单方法:下载windows安装版,下一步下一步搞定! 非安装版: 1.下载tomcat7 windows版 2.首先找到F:\apache\bin\service.bat(不同的计算机Tomcat ...
- java不求有功,但求无过—异常处理
在程序开发中,错误往往有两种.一种是编译时出现的错误,该种错误比較easy发现.还有一种是执行时出现的错误,该种错误是开发者比較头疼的.异常就是一个执行时的错误,比如,除数为0 ,数组越界等. 异常处 ...
- 支持MySql的数据库自动分表工具DBShardTools发布
支持MySql的数据库自动分表工具DBShardTools发布 前段时间参与了公司的一个项目,这个项目的特点是数据量.访问量都比较大,考虑使用数据库水平分表策略,Google了大半天,竟然没有找到分表 ...
- Qt 学习之路:坐标系统
在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Qt 的坐标系统了.泛泛而谈坐标系统,有时候会觉得枯燥无味,难以理解,好在现在我们已经有了基础. 坐标 ...
- 粗谈pcap_next_ex()
pcap_next_ex(pcap_t* p,struct pcap_pkthdr** pkt_header,const u_char** pkt_data) 功能: 从interface或离线记 ...