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 ...
随机推荐
- [转]33 useful Keyboard Shortcuts for Run commond
原文: http://www.shortcutworld.com/en/win/Run-command.html 1. Calling Run CommandWin + r ...
- HDOJ 2030 汉字统计
Problem Description 统计给定文本文件中汉字的个数. Input 输入文件首先包含一个整数n,表示测试实例的个数,然后是n段文本. Output 对于每一段文本,输出其中的汉字的个数 ...
- NOI题库7624 山区建小学(162:Post Office / IOI2000 POST OFFICE [input] )
7624:山区建小学 Description 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di(为 ...
- lightoj 1030 概率dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1030 #include<cstdio> #include<cstri ...
- lost connection to mysql server reading initial communication packet
- nopcommerce中文网
nopcommerce中文网 | nopcommerce是国外asp.net领域一个高质量的b2c开源项目,基于EntityFramework和MVC开发,交流QQ群:75272942 nopcomm ...
- ADO.NET对象模型
ADO.NET建立在NetFramwork一些核心类的基础之上,可以将这些类分为两组:用于包含于管理数据的容器类与用于连接特定数据源的控制类. 容器类是通用的,无论使用什么样的数据源,都可以使用相同的 ...
- 使用Codis搭建redis集群服务
转(http://www.jianshu.com/p/f8e968e57863) 一. 应用场景 redis 作为数据结构存储引擎,有着很多优点 高性能单机引擎可以达到5-10W qps 数据结构全面 ...
- Python 函数的参数知识汇总
函数搞不熟,后边就晕头转向了,在此重新归纳一下廖大神的函数教程,加深记忆 一.函数的参数分为: 位置参数 def power(x): # x 就是power(x)的一个位置参数,我们调用power(x ...
- js 中cookie 使用
一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...