0

0

如何将js常用函数进行封装

一个新手

一个新手

发布时间:2017-09-07 13:27:01

|

2548人浏览过

|

来源于php中文网

原创

在前端的开发中,我们会经常遇到这样的一个问题,就是当页面滚动到一定的时候;会有回到顶部的需求,那么在每一个页面上都写这么一个方法就会使代码很冗余;所以为了解决这个问题;我把代码抽了出来,封装成一个公用的函数,方便使用。封装的还不是很好,有不同见解,可以相互讨论讨论~微笑

通吃客零食网整站 for Shopex
通吃客零食网整站 for Shopex

第一步】:将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式,可以查看:(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】:在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】:登录后台,工具箱里恢复数据管理后台是url/sho

下载
/** * 页面回顶部
 * @obj //对象{}传入 ; 其中回顶部的imgSrc路径必传 ; 其他参数说明看函数内部的默认defaults对象 
 */
function _backToTop(obj){   
    var defaults = {
      pageHeight: 2,    //默认当向下滚动2页时,显示      
      aId: 'aToTop',    //a标签的id      
      href: 'backTop',   //跳转到指定body元素的顶部      
      aStyle: {        //a标签样式    
      width: '40px',
         height: '40px',
         display: 'block',
         position: 'fixed',
         right: '20px',
         bottom: '50px',
         zIndex: 99999  //z-index:999的这种样式以 zIndex:999的方式传值      
      },
      imgStyle: {          //img标签样式         
         width: '100%',
         height: '100%'      }
   };   for (var def in defaults) {      if (typeof obj[def] === 'undefined') {         obj[def] = defaults[def];
      }      else if (typeof obj[def] === 'object') {         for (var deepDef in defaults[def]) {            if (typeof obj[def][deepDef] === 'undefined') {               obj[def][deepDef] = defaults[def][deepDef];
            }
         }
      }
   }   
   //把样式对象转化为样式字符串,有如:z-index:999;的样式按 zIndex:999;的 方式传值   
       obj.aStyle = 
   JSON.stringify(obj.aStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);});   
       obj.imgStyle = JSON.stringify(obj.imgStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);});  
        var winHeight = document.documentElement.clientHeight || document.body.clientHeight;   
        var scrollValue;
        document.getElementsByTagName('body')[0].setAttribute('id',obj.href);   
        var box = document.createElement('a');   
        var img = document.createElement('img');
   box.setAttribute('id',obj.aId);
   box.setAttribute('href','#'+obj.href);
   box.setAttribute('style',obj.aStyle);
   img.setAttribute('style',obj.imgStyle);
   img.setAttribute('src',obj.imgSrc);
   box.appendChild(img);
   window.addEventListener('scroll',function(e){
      scrollValue = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;      if(scrollValue > (winHeight * obj.pageHeight)){
         document.body.appendChild(box);
      }else{
         document.getElementById(obj.aId) ?
   document.body.removeChild(document.getElementById(obj.aId)) : null;
      }
   });
}

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

0

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

0

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

0

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

19

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

17

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

2

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号