闲来无事的练习：
将函数方法封装成面向对象方法：
原本JS代码：
window.onload= function () {
scrollHandle('.scroll-wrap')
scrollHandle('.scroll-wrap2')
function scrollHandle(element) {
var scroll = document.querySelector(element);
var ul = scroll.querySelector('.scroll');
var stY = 0;
var oldY = 0;
var dy = 0;
var maxScroll = 50;
var minScroll = (scroll.offsetHeight - ul.offsetHeight - maxScroll)
var backMax = 0;
var backMin = (scroll.offsetHeight - ul.offsetHeight)
//下拉
ul.addEventListener('touchstart', tsHandle)
function tsHandle(e) {
stY = e.changedTouches[0].pageY
}
ul.addEventListener('touchmove', mvHandle)
function mvHandle(e) {
ul.style.transition = 'none'
dy = e.changedTouches[0].pageY - stY;
if ((dy + oldY) > maxScroll) {
ul.style.transform = 'translateY(' + maxScroll + 'px)'
} else if ((dy + oldY) < minScroll) {
ul.style.transform = 'translateY(' + minScroll + 'px)'
} else {
ul.style.transform = 'translateY(' + (dy + oldY) + 'px)'
}
};
ul.addEventListener('touchend', edHandle)
function edHandle(e) {
oldY = oldY + dy
comeBack()
}
//反弹
function comeBack() {
if (oldY > backMax) {
ul.style.transition = 'transform .5s'
ul.style.transform = 'translateY(' + backMax + 'px)'
oldY = backMax
} else if (oldY < backMin) {
ul.style.transition = 'transform .5s'
ul.style.transform = 'translateY(' + backMin + 'px)';
oldY = backMin
}
}
}
}
封装后：
window.onload = function () {
var scroll1=document.querySelector('.scroll-wrap')
var scroll2=document.querySelector('.scroll-wrap2')
var myScroll1=new Repository(scroll1)
var myScroll2=new Repository(scroll2)
var myTool1=new Event()
var myTool2=new Event()
scrollUp(myScroll1,myTool1)
scrollUp(myScroll2,myTool2)
function scrollUp(myScroll,myTool){
//touchstart时记录下初始pageY
myScroll.scroll.addEventListener('touchstart', function (e) {
myScroll.stY=myTool.getPageY(e)
})
myScroll.scroll.addEventListener('touchmove', function (e) {
//touchmove时触发，清除过渡
myTool.setTransition(myScroll.scroll)
//计算真实滚动距离
myScroll.dy=myTool.getPageY(e)-myScroll.stY;
//判断是否超出滚动区，如果是就锁住不让滚
if(myScroll.fullY()>myScroll.maxScroll){
myTool.setTranslateY(myScroll.scroll,myScroll.maxScroll)
}else if(myScroll.fullY()<myScroll.minScroll){
myTool.setTranslateY(myScroll.scroll,myScroll.minScroll)
}else{
//如果没有超出，就实时更新滚动距离
myTool.setTranslateY(myScroll.scroll,myScroll.fullY())
}
})
myScroll.scroll.addEventListener('touchend', function () {
//touchend时触发，重置oldY,记录上一次的滚动距离
myScroll.reOldY()
//给上过渡属性，如果后面需要反弹就会使用过渡，如果不需要反弹则会在touchmove时清除
myTool.setTransition(myScroll.scroll,'transform .5s')
//给上过渡属性，如果后面需要反弹就会使用过渡，如果不需要反弹则会在touchmove时清除
if(myScroll.oldY>myScroll.backMax){
myTool.setTranslateY(myScroll.scroll,myScroll.backMax)
myScroll.oldY=myScroll.backMax
}else if(myScroll.oldY<myScroll.backMin){
myTool.setTranslateY(myScroll.scroll, myScroll.backMin);
myScroll.oldY=myScroll.backMin
}
})
}
};
//存储变量的
function Repository(element) {
//获取element下的scroll便于获得高度
this.scroll = element.querySelector('.scroll');
//touchstart触发时获得stY
this.stY=0;
//touchmove触发时不断改变dy
this.dy=0;
//touchend触发时reset oldY
this.oldY=0;
this.reOldY= function () {
this.oldY=this.oldY+this.dy
}
//获取dy和oldY之和，用于计算真实滚动距离（原本就有的距离+现在滚动的距离）
this.fullY= function () {
return this.dy+this.oldY
}
//最大滚动区域和最小滚动区域
this.maxScroll = 50;
this.minScroll=element.offsetHeight-this.scroll.offsetHeight-this.maxScroll;
//设置区域最高和最低值，超出此区域就会反弹
this.backMax=0;
this.backMin = element.offsetHeight - this.scroll.offsetHeight;
return this
}
//存储事件的
function Event() {
//获得事件触发时的pageY ,必须给注册事件的时候使用
this.getPageY= function (e) {
return e.changedTouches[0].pageY
}
//设置translateY
this.setTranslateY = function (element, num) {
element=element||{};
num = num || 0;
element.style.transform='translateY('+num+'px)'
};
//设置过渡
this.setTransition = function (element, string) {
element=element||{};
string=string||'none';
element.style.transition=string
};
}
页面结构+CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/category.css">
</head>
<body>
<!-- 头部区域 -->
<header class="common-header clearfix">
<div class="left fl jd-icons jdw-center"></div>
<div class="right fr jd-icons jdw-center"></div>
<div class="center">
<input type="search" placeholder="京东3C 百万件爆品岂止5折">
</div>
</header>
<!-- 主体区域 -->
<section class="cate-main">
<aside class="left fl scroll-wrap">
<ul class="scroll">
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
<li><a href="#">列表一</a></li>
</ul>
</aside>
<article class="right scroll-wrap2">
<div class="scroll">
<div class="img-wrap">
<img src="image/imgs/cate_banner.jpg" alt="">
</div>
<h4 class="zc-tit">专场推荐</h4>
<ul class="zc-info">
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
</ul>
<h4 class="zc-tit">专场推荐</h4>
<ul class="zc-info">
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
</ul>
<h4 class="zc-tit">专场推荐</h4>
<ul class="zc-info">
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
</ul>
<h4 class="zc-tit">专场推荐</h4>
<ul class="zc-info">
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
</ul>
<h4 class="zc-tit">专场推荐</h4>
<ul class="zc-info">
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
<li class="w33 fl"><a href="#"><img src="image/imgs/cate_item01.jpg" alt=""></a><p>新鲜水果</p></li>
</ul>
</div>
</article>
</section>
<!--<script type="text/javascript" src="js/category.js"></script>-->
<script src='js/tomodule.js'></script>
</body>
</html>@charset "utf-8";
/* 这个css是初始化的css，在任何项目里面都可以使用 */
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling : touch;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/* 取消链接高亮 */
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 图片自适应 */
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
display: block;
-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
color: #555;
background-color: #F7F7F7;
}
em, i {
font-style: normal;
}
ul,li{
list-style-type: none;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #969696;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
img {
border: none;
}
input{
font-family: 'Microsoft YaHei';
}
/*单行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box-orient: vertical;
}
.w50{
width: 50%;
}
.w25{
width: 25%;
}
.w20{
width: 20%;
}
.w33{
width: 33.333333%;
}
.fl{
float: left;
}
.fr{
float: right;
}
.db{
display: block !important;
}
.dn{
display: none;
}
/*
* @Author: Administrator
* @Date: 2017-02-23 15:59:41
* @Last Modified by: Administrator
* @Last Modified time: 2017-02-26 16:40:10
*/
/* 这个css主要做的事情是将这个项目的一些公共元素提取出来，为了以后的复用 */
/* 精灵图缩放公共类 */
.jd-icons:before{
content: '';
background: url(../image/icons/jd-sprites.png) no-repeat;
/* 这里不能直接写50% 因为这个百分比参照的是当前元素的宽高 */
-webkit-background-size: 200px 200px;
background-size: 200px 200px;
}
/* 水平垂直公共类 */
.jd-center,.jdw-center:before {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform :translate(-50%,-50%);
transform :translate(-50%,-50%);
}
/* 垂直居中公共类 */
.jd-center-y,.jdw-center-y:before {
position: absolute;
top: 50%;
-webkit-transform :translateY(-50%);
transform :translateY(-50%);
}
/* 水平居中公共类 */
.jd-center-x,.jdw-center-x:before {
position: absolute;
left: 50%;
-webkit-transform :translateX(-50%);
transform :translateX(-50%);
}
/* 底部边框公共类 */
.line-bottom {
position: relative;
}
.line-bottom:before {
content: '';
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
position: absolute;
left: 0;
bottom: 0;
}
/* 右边公共边框 */
.right-line {
position: relative;
}
.right-line:before {
content: '';
position: absolute;
width: 0;
height: 100%;
right: 0;
top: 0;
border-right: 1px solid #ccc;
}
/* 公共头部区域 */
.common-header {
height: 44px;
border-bottom: 1px solid #ccc;
position: fixed;
width: 100%;
top: 0;
background:linear-gradient(to bottom,#fff,#e0e0e0);
}
.common-header .left {
width: 40px;
height: 44px;
position: relative;
}
.common-header .left:before {
width: 13px;
height: 20px;
background-position: -24px 0;
}
.common-header .right {
width: 42px;
height: 44px;
position: relative;
}
.common-header .right:before {
width: 18px;
height: 19px;
background-position: -61px 0;
}
.common-header .center {
height: 44px;
margin: 0 42px 0 40px;
padding-top: 7px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.common-header .center input[type="search"] {
width: 100%;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
text-indent: 5px;
}
.mt45 {
margin-top: 45px;
}/*
* @Author: Administrator
* @Date: 2017-02-26 11:00:31
* @Last Modified by: Administrator
* @Last Modified time: 2017-02-26 16:40:33
*/
/* 主体区域 */
html,body,.cate-main{
height: 100%;
}
.cate-main {
padding-top: 45px;
-webkit-box-sizing:border-box;
box-sizing :border-box;
}
.cate-main .left {
width: 74px;
height: 100%;
border-right: 1px solid #ccc;
overflow: hidden;
}
.cate-main .right {
height: 100%;
margin-left: 75px;
padding-left:10px;
}
.cate-main .left .scroll li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
text-align: center;
}
.img-wrap {
padding-top: 10px;
}
.cate-main .right {
overflow: hidden;
}
.cate-main .right .zc-tit {
line-height: 25px;
margin-top: 10px;
font-size: 16px;
}
.cate-main .right .zc-info {
overflow: hidden;
}
.cate-main .right .zc-info li {
background-color: #fff;
}
.cate-main .right .zc-info a {
display: block;
padding:0 10px;
}
.cate-main .right .zc-info p {
line-height: 30px;
text-align: center;
font-size: 14px;
}
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
