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 ...
随机推荐
- HDOJ/HDU 2560 Buildings(嗯~水题)
Problem Description We divide the HZNU Campus into N*M grids. As you can see from the picture below, ...
- 出现 HTTP Error 503. The service is unavailable 错误
今天修改一些配置后重启了IIS,兴高采烈的按下了回车.duang一下,HTTP Error 503. The service is unavailable,蹦出这行字,网站挂了. 没动别的竟然这样了. ...
- SRM 441(1-250pt, 1-500pt)
DIV1 250pt 题意:用数组A表示置换,由该置换得到数组B(B[0] = 0, B[i] = A[B[i-1]]).给定A,求一个A',使得由A'得到的B为单循环置换且A'与A的差距最小.定义A ...
- jsp的include两种使用方法区别
指令include是将被包含页面中的代码复制粘贴到主页面中,最后编译形成主页面的类文件(一个). 指令include中file属性的值必须是项目中已存在的文件,否则主页面报异常. 指令include如 ...
- Qt 智能指针学习(7种指针)
Qt 智能指针学习 转载自:http://blog.csdn.net/dbzhang800/article/details/6403285 从内存泄露开始? 很简单的入门程序,应该比较熟悉吧 ^_^ ...
- 跨服务器修改数据 分类: SQL Server 2014-08-21 21:24 316人阅读 评论(0) 收藏
说明: 两个服务器: 192.168.0.22 A 192.168.0.3 B 数据库备份在A上 数据库在B上 在A上写: exec sp_addlinkedserver 'ITSV ...
- 用Octopress在Github pages上写博客
安装Git环境 下载msysgit(git for windows),并安装. 可以选择安装TortoiseGit,这个在windows的资源管理器里装了很多git的右键菜单,对git命令行不熟悉的同 ...
- 用ChooseALicense帮自己选一个开源license,然后用AddALicense给自己的github自动加上license文件
在我之前的一篇博客里面介绍过tl;drLegal ——开源软件license的搜索引擎,可以很方便的查询各种license,并且给出了很简洁的解释.今天又发现了另外一个帮助你选择你的开源软件licen ...
- 20169210《Linux内核原理与分析》第三周作业
本次作业也是分为两部分,第一部分是对实验楼<Linux基础入门>复习,第二部分为对课本18章的复习. 第一次学习实验楼的<Linux基础入门>时由于是第一次接触Linux,所以 ...
- Qt 学习之路:QML 基本元素
QML 基本元素可以分为可视元素和不可视元素两类.可视元素(例如前面提到过的Rectangle)具有几何坐标,会在屏幕上占据一块显示区域.不可视元素(例如Timer)通常提供一种功能,这些功能可以作用 ...