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 ...
随机推荐
- C# 动态类型与动态编译简介
关于C#的动态类型与动态编译的简介,主要是一个Demo. 动态类型 关键字: dynamic 这里有详细的介绍:[C#基础知识系列]专题十七:深入理解动态类型 动态类型的应用场景 可以减少强制转换(强 ...
- Socket 编程之 TCP 实现
前几天介绍了计算机网络的一些概念,并介绍了几个协议.下面就说说 Java 中的 Socket 编程,服务器和客户端是如何通信的呢? 首先要介绍一下 Socket ,我们知道在 TCP/IP 协议簇中, ...
- 用Python开始机器学习(3:数据拟合与广义线性回归)
机器学习中的预测问题通常分为2类:回归与分类. 简单的说回归就是预测数值,而分类是给数据打上标签归类. 本文讲述如何用Python进行基本的数据拟合,以及如何对拟合结果的误差进行分析. 本例中使用一个 ...
- hdu 4536 dfs
题意:XCOM-Enemy Unknown是一款很好玩很经典的策略游戏.在游戏中,由于未知的敌人--外星人入侵,你团结了世界各大国家进行抵抗.随着游戏进展,会有很多的外星人进攻事件.每次进攻外星人会选 ...
- 解决请求参数的中文乱码问题(get、post)
2018-11-28 在web请求与响应中,会遇到乱码问题,比如填写表单数据时,难免会输入中文,姓名.公司名称等.由于HTML设置了浏览器在传递请求参数时,采用的编码方式是UTF-8,但在解码时采用的 ...
- bzoj 3926
后缀自动机扩展到树形结构上. 先建出大的Trie,然后我们得到了一棵Trie树,对于树上的每个节点,保存一个后缀自动机从根走它代表的字符串后到达的节点,每次其儿子就从父亲的这个节点开始扩展. /*** ...
- 2018-2019-20172329 《Java软件结构与数据结构》第三周学习总结
2018-2019-20172329 <Java软件结构与数据结构>第三周学习总结 教材学习内容总结 <Java软件结构与数据结构>第五章-队列 一.概述 1.队列是什么? 队 ...
- Loj10153 二叉苹果树
题目描述 有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共 NN 个节点,标号 11 至 NN,树根编号一定为 11. 我们用一根树枝两端连接的节点编号描述一根树枝的 ...
- Codeforces Round #FF (Div. 1) A. DZY Loves Sequences 动态规划
A. DZY Loves Sequences 题目连接: http://www.codeforces.com/contest/446/problem/A Description DZY has a s ...
- Codeforces Round #234 (Div. 2) B. Inna and New Matrix of Candies SET的妙用
B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...