首页 > 其他分享 >帮猪猪修修改的代码2016年的代码记录

帮猪猪修修改的代码2016年的代码记录

时间:2024-06-16 19:10:00浏览次数:23  
标签:function style mainContent 代码 var item 猪猪 myThis 2016

这是一个图片轮播的代码,但是它们的是css 动画,当时代码运行不了,我花了二天才修改,现在记录一下,凭回忆用。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>网易科技</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
    <style>  
        body, div, header, footer, strong, ul, li, span, h1, h2, a, img {  
            margin: 0;  
            padding: 0;  
            outline: none;  
            border: none;  
            font-family: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;  
        }  
        body, html {  
            min-height: 100%;  
        }  
        ol, ul {  
            list-style: none;  
        }  
        /* 其他样式... */  
        .header {  
            height: 32px;  
            line-height: 32px;  
            background: #FC9;  
            text-align: center;  
            color: #F00;  
            font-size: 1em;  
        }  
        .nav, .footer-menu { /* 修正类名为 footer-menu */  
            display: block;  
            padding: 10px 0;  
        }  
        .nav a, .footer-menu a {  
            display: inline-block;  
            width: 30%;  
            padding: 3px;  
            text-decoration: none;  
            -webkit-box-sizing: border-box;  
            text-align: center;  
        }  
        .nav a:hover {  
            border-radius: 5px;  
            background: #C60;  
            color: #FFF; /* 移除重复的颜色声明 */  
        }  
        /* 其余样式... */  
        #get-item a {  
            border-radius: 10px; /* 修正属性名为 border-radius */  
            /* 其他样式... */  
        }  
        /* 其余样式... */  
    </style>  
</head>  
<body>  
    <!-- Header -->  
    <header class="header">潮阳商城</header>  
  
    <!-- Navigation -->  
    <nav class="nav">  
        <a href="javascript:;">产品</a>  
        <a href="javascript:;">商家</a>  
        <a href="javascript:;">关于</a>  
    </nav>  
  
    <!-- Slide -->  
    <div class="slide" id="hotSlide">  
        <div class="slide-main" id="mainContent">  
            <!-- Slide images -->  
        </div>  
        <div id="get-item">  
            <!-- Pagination dots -->  
        </div>  
    </div>  
  
    <!-- Hot List -->  
    <ul class="hot-list">  
        <!-- List items -->  
    </ul>  
  
    <!-- Click More -->  
    <a href="javascript:;" class="click-more">查看更多</a>  
  
    <!-- Class Info -->  
    <div class="class-info">  
        <!-- Class info content -->  
    </div>  
  
    <!-- Download App -->  
    <a href="javascript:;" class="downapp">  
        <img src="images/xiazai.png" alt="下载应用">  
    </a>  
  
    <!-- Footer Function Menu -->  
    <nav class="footer-menu">  
        <a href="javascript:;">高档版</a>  
        <a href="javascript:;">高档版</a>  
        <a href="javascript:;">高档版</a>  
    </nav>  
  
    <!-- Footer -->  
    <footer class="footer">网易提意见</footer>  
  
    <script>  
   var hotSlide = {
            hasProtoType: false,
            newClass: function (ele) {
                ele = ele || {};
                if (this.hasProtoType == false) {
                    this.init.prototype = hotSlide;
                    this.hasProtoType = true;
                }
                return new this.init(ele);
            },
            getId: function (id) {
                return typeof id == 'string' ? document.getElementById(id) : id;
            },
            prevPage: function () {
                if (this.item == 0) {
                    this.item = this.lengths;
                }
                this.item--;
                this.mainAnimate(this.item);
                this.curAnimate(this.item);
            },
            nextPage: function () {
                this.item++;
                if (this.item == this.lengths) {
                    this.item = 0;
                }
                this.mainAnimate(this.item);
                this.curAnimate(this.item);
            },
            bindEvent: function () {
                var myThis = this;
                var eleEvent = myThis.getId('hotSlide');
                eleEvent.addEventListener('touchstart', function (e) {
                    myThis.initPage.x = e.changedTouches[0].pageX;
                    myThis.initPage.y = e.changedTouches[0].pageY;
                }), eleEvent.addEventListener('touchmove', function (e) {
                    myThis.endPage.x = e.changedTouches[0].pageX;
                    myThis.endPage.y = e.changedTouches[0].pageY;
                    var xcurPage = myThis.endPage.x - myThis.initPage.x - myThis.item * myThis.winWidth;
                    myThis.mainContent.style.webkitTransform = 'translate3d(-' + xcurPage + 'px, 0, 0)';
                }), eleEvent.addEventListener('touchend', function (e) {
                    if (Math.abs(myThis.endPage.x - myThis.initPage.x) > 50) {
                        if (myThis.endPage.x - myThis.initPage.x < 0) {
                            myThis.prevPage();
                        } else {
                            myThis.nextPage();
                        }
                    } else {
                        myThis.mainContent.style.webkitTransform = 'translate3d(' + myThis.item * myThis.winWidth + 'px, 0, 0)';
                    }
                })
            },
            mainAnimate: function () {
                var _this = this;
                _this.mainContent.style.webkitTransition = '0.4s';
                _this.mainContent.style.webkitTransform = "translate3d(-" + (_this.item * _this.winWidth) + "px, 0, 0)";
            },
            curAnimate: function (getItem) {
                for (var k = 0; k< this.getItem.length; k++) {
                    this.getItem[k].className = '';
                }
                this.getItem[getItem].className = 'cur';
            },
            init: function (ele) {
                var _this = this;
                _this.item = 0;
                _this.hotSlide = _this.getId('hotSlide');
                _this.mainContent = _this.getId('mainContent');
                _this.slideCont = _this.mainContent.getElementsByTagName('div');
                _this.winWidth = window.innerWidth;
                _this.lengths = _this.slideCont.length;
                for (var i = 0; i < _this.lengths; i++) {
                    _this.slideCont[i].style.width = _this.winWidth + 'px';
                }
                _this.getItem = _this.getId('get-item').getElementsByTagName('a');
                _this.initPage = { x: 0, y: 0 }
                _this.endPage = { x: 0, y: 0 }
                _this.bindEvent(ele);
            }
        };
        pageObj = { wrap: 'slide' }
        hotSlide.newClass(pageObj);
      
    </script>  
</body>  
</html>

 

标签:function,style,mainContent,代码,var,item,猪猪,myThis,2016
From: https://www.cnblogs.com/ZzwWan/p/18251069

相关文章

  • 08梦断代码阅读笔记之三
     自身对于何为软件,何为代码仅有一些肤浅的认识,半学期下来,编程能力也有了较大的提高。但是其中的痛苦和艰辛,也很值得自己去慢慢的回味。书中描述一群人们怀抱着改变世界的理想上路了,却在追寻时发现,那些近在眼前的理想之峰,变得那么的遥不可及;每当翻过一座横亘在面前的山峰时,总以为......
  • 【华为OD】D卷真题100分:阿里巴巴找黄金宝箱(II) C语言代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、Java、C、python、C++代码实现:【华为OD】D卷真题100分:阿里巴巴找黄金宝箱(II)JavaScript代码实现[思......
  • 【华为OD】D卷真题200分:数字游戏 python代码实现[思路+代码]
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、Java、C、python、C++代码实现:【华为OD】D卷真题200分:数字游戏JavaScript代码实现[思路+代码]-CSDN......
  • 【华为OD】D卷真题100分: 生日礼物 C++代码实现
    【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客C、java、python、JS、C++代码实现:【华为OD】D卷真题100分:生日礼物C语言代码实现-CSDN博客【华为OD】D......
  • 循环神经网络(RNN)入门指南及代码示例
    简介循环神经网络(RecurrentNeuralNetwork,RNN)是一种擅长处理序列数据的神经网络结构。与传统的前馈神经网络不同,RNN拥有循环连接,可以保留以前的信息,从而在处理时间序列数据、自然语言处理等任务中表现出色。在这篇文章中,我们将详细介绍RNN的基本概念及其变体LSTM和GRU,并通过......
  • 【代码+详解】算法题 : 骨头收集者
    ❗❗❗必看:下列题我全部都使用Java语言写的,并且均可以提交成功,获得Accepted结果的.如果代码和详解看了之后,对答案有任何疑问,都可以在评论区提出来,我都会一个一个回答.❗❗❗感谢大家的支持,如果喜欢我的博客,关注点赞收藏评论一波,非常感谢!!!文章目录......
  • GitHub Copilot 登录账号激活,在pycharm写代码的效率提高了
    GitHubCopilot想必大家都是熟悉的,一款AI代码辅助神器,相信对编程界的诸位并不陌生。今日特此分享一项便捷的工具,助您轻松激活GitHubCopilot,尽享智能编码之便利!GitHubCopilot是由GitHub和OpenAI共同开发的人工智能代码辅助工具,所以该插件是专门提供给程序员来写代......
  • 趣味C语言——【关机代码】
    ......
  • 代码随想录刷题记录(7)| 字符串(344.反转字符串,541. 反转字符串II,卡码网:54.替换数字)
    目录(一)反转字符串1.题目描述2.思路3.解题过程(二)反转字符串Ⅱ1.题目描述2.思路3.解题过程(三)替换数字1.题目描述2.思路3.解题过程(一)反转字符串344.反转字符串-力扣(LeetCode)1.题目描述        编写一个函数,其作用是将输入的字符串反转过......
  • 代码随想录刷题记录(8)| 字符串(151.反转字符串里的单词,卡码网:55.右旋转字符串,28. 找出字
    目录(四)反转字符串里的单词1. 题目描述2.思路3.解题过程(1)使用额外空间存储(2)原地反转 (五)右旋转字符串1.题目描述2.思路3.解题过程 (六)找出字符串中第一个匹配项的下标1.题目描述2.思路3.解题思路(七)重复的子字符串1.题目描述2.思路3.解题过程(八)......