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 ...
随机推荐
- Linux学习笔记23——取消线程
一 相关函数 1 发送终止信号 #include <pthread.h> int pthread_cancel(pthread_t thread); 2 设置取消状态 #include & ...
- 局域网内通过UDP协议进行传输接受数据——AsyncUdpSocket
在相同的局域网内,可以通过Udp协议进行数据的传输和接收,Udp协议与Http协议不同,Udp更加方便快捷,省去了很多步骤,但是也有很多传输问题,在局域网内小范围传输数据时Udp还是非常能够胜任的. ...
- 2013=7=29 nyist 13题
Fibonacci数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递归地 ...
- 局域网内linux由ip反解析主机名
- java_method_readFile读取文件文本txt
/** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...
- Hibernate自定义数据库查询(排序、输出条数)
Hibernate数据库操作类(eg:TexDAO.java) /* * queryString HQL语句,first开始条数, max输出条数 ,norder排序 * 例: List lis = ...
- bzoj3065: 带插入区间K小值
无聊来写了下 一开始发现树高是O(n)的,然后就MLE了,进去看了下发现没有重构! 看了半天发现调用错了函数 然后进去又发现不满足sz = ch[0]->sz + ch[1]->sz + ...
- Google Reader的另一个开源的替代品Go Read
Google Reader到7月1号退休了,于是出现了一批Google Reader的替代品,比如Google Reader Is Shutting Down; Here Are the Best A ...
- 使用PDO连接数据库 查询和插入乱码的解决方法
问题:PDO连接数据库后,查询和插入中文到数据库,出现乱码,如图: 解决方法: 法1: try{ $opts_values = array(PDO::MYSQL_ATTR_INIT_COMMAND=& ...
- 自定义控件之-----progressBar
写了那一年多代码都没有认认真真写过自定义控件,最近看到网易新闻里面的加载图标如图 感觉很有意思,就准备自己写个玩玩.在api里面脑补了一些canvas的姿势,就上了,效果如下. 说实话真心不难,自定义 ...