jquery 返回顶端组件
自己写了一个基于jquery的返回页面顶端的组件。
(function($) {
var g;
$.backtop = function(options) {
extend($.backtop.config, options);
this.config = $.backtop.config;
this.init();
g = this;
};
$.backtop.config = {
title : null,// 返回顶端文字说明
df_color : "#77AA55"// 组件默认颜色
};
$.backtop.prototype = {
config : null,
backtop : null,// 当前创建返回顶端对象
init : function() {
this._scrool();
},
_scrool : function() {
window.onscroll = function() {
g._create_ob($(window).scrollTop());
};
},
_create_ob : function(top) {
if(top==0){
$("#back_top").remove();
return;
}
$("#back_top").remove();
this.backtop = $("<div class='mouseover'><img src='ui/main/gotop.gif'></img></div>");
$(this.backtop).bind("click",function(){
g._moveTo();
});
$(this.backtop).bind("mouseover",function(){
$(g.backtop).removeClass();
$(g.backtop).addClass("mouse");
});
$(this.backtop).bind("mouseout",function(){
$(g.backtop).removeClass();
$(g.backtop).addClass("mouseover");
});
$(this.backtop).attr("id","back_top");
/*$(this.backtop).css("backgroundColor", this.config.df_color);*/
$(this.backtop).css("zIndex", 1000);
$(this.backtop).css("position", "absolute");
$(this.backtop).css("cursor","pointer");
$(this.backtop).width(30);
$(this.backtop).height(30);
$(this.backtop).css("left",$("body").attr("clientWidth")-50);
$(this.backtop).css("top", top+300);
$("body").append(this.backtop);
},// 创建返回顶端jquery对象
_moveTo:function(){
$("#back_top").remove();
window.scroll(0,0);
}
};
})(jQuery);
var extend = function($cf, options) {
for ( var a in options) {
$cf[a] = options[a];
}
};
jquery 返回顶端组件的更多相关文章
- jquery的返回顶端的功能实现
页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:
- jquery返回顶部,支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- 封装jQuery下载文件组件
使用jQuery导出文档文件 jQuery添加download组件 jQuery.download = function(url, data, method){ if( url && ...
- 【转】25个非常实用的jQuery/CSS3应用组件
今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...
- 25个非常实用的jQuery/CSS3应用组件
今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...
- Jquery 返回json数据在IE浏览器中提示下载的问题
Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...
- JS时间转换,url编码,jquery返回类型等问题
1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...
随机推荐
- UVA - 10815 - Andy's First Dictionary STL
Andy, 8, has a dream - he wants to produce his very own dictionary. This is not an easy task for him ...
- 详谈 Spring 中的 IOC 和 AOP
这篇文章主要讲 Spring 中的几个点,Spring 中的 IOC,AOP,下一篇说说 Spring 中的事务操作,注解和 XML 配置. Spring 简介 Spring 是一个开源的轻量级的企业 ...
- iOS系统中导航栏的转场解决方案与最佳实践
背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
- insert ignore duplicate key
Insert into T1select * from T2 where NOT EXISTS (select 1 from T1 X where X.GUID=T2.GUID);
- android 不失真 显示 超高清 图片 长图
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 通过计算 位图工厂.选项 对象的 inSamleSize 值 等比压缩 图片. 使用 ...
- SPOJ QTREE
QTREE /* 题目大意:维护一棵树,允许修改边权以及查询链上最大值 题解:我们将边权转为点权,标记在深度较深的点上,树链剖分后用线段树处理即可 */ #include <cstdio> ...
- hdu 4545 贪心 *
题意:小明和他的好朋友小西在玩一个新的游戏,由小西给出一个由小写字母构成的字符串,小明给出另一个比小西更长的字符串,也由小写字母组成,如果能通过魔法转 换使小明的串和小西的变成同一个,那么他们两个人都 ...
- 利用Jenkins实现JavaWeb项目的自动化部署
修改代码,打包,上传,重启... 大把的时间花费在这些重复无味的工作上.笔者与当前主流的价值观保持一致:我们应该把时间花费在更有意义的事情上.我们可以尝试借助一些工具,让这些重复机械的工作交给计算机去 ...
- as 汇编器
[root@localhost ~]# cat .s .file "write.s" .section .rodata hello: .string "hello, wo ...
- Ransac 与 最小二乘(LS, Least Squares)拟合直线的效果比较
代码下载地址 http://pan.baidu.com/s/1eQIzj3c 进入目录后,请自行定位到该博客的源代码与数据的目录“