huapin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 关闭电话号码的自动识-->
<meta name="format-detection" content="telephone=no,email=no" />
<!-- 页面描述 -->
<meta name="description" content="百胜扬是一家做企业收并购整合的工业电子商务平台公司..."/>
<!-- 页面关键词 -->
<meta name="keywords" content="百胜扬"/>
<!-- 网页作者 -->
<meta name="author" content="百胜扬"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- 强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- winphone系统a、input标签被点击时去掉半透明灰色背景-->
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="../../../macs/mcbas/miconfont.css">
<link rel="stylesheet" href="../../../macs/mcbas/mbastandard.css"/>
<link rel="stylesheet" href="../../../macs/mcbam/mcbas/mcbasear/mbaseari-a-1.css"/>
</head>
<body ontouchstart>
<div class="head-stus"></div>
<div class="main-c">
<div class="head-overall">
<header>
<span>
<i class="iconfont icon-fanhui"></i>
</span>
<section class="inp-sear">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder="">
<i class="iconfont icon-yuyin"></i>
</section>
<span>
Search
</span>
</header>
</div>
<div class="con-main">
<nav class="clrflo">
<h2>Hot search</h2>
<div class="contrl-hotsear clrflo">
<div class="hotsear" id="hotsear">
<ul class="clrflo">
<li>iPhone SEs</li>
<li>Huawei Mata9</li>
<li>LG G5</li>
<li>MEIZU Pro</li>
<li>Xiaomi 5</li>
<li>Mate Book</li>
<li>Vivo Xplay 5</li>
<li>OPPO S9</li>
<li>NOKIA N10</li>
</ul>
<ul class="clrflo " >
<li>iPhone2 SEs</li>
<li>Huawei2 Mata9</li>
<li>LG2 G5</li>
<li>MEIZU2 Pro</li>
<li>Xiaomi2 5</li>
<li>Mate2 Book</li>
<li>Vivo2 Xplay 5</li>
<li>OPPO2 S9</li>
<li>NOKIA2 N10</li>
</ul>
<ul class="clrflo ">
<li>iPhone3 SEs</li>
<li>Huawei3 Mata9</li>
<li>LG3 G5</li>
<li>MEIZU3 Pro</li>
<li>Xiaomi3 5</li>
<li>Mate3 Book</li>
<li>Vivo3 Xplay 5</li>
<li>OPPO3 S9</li>
<li>NOKIA3 N10</li>
</ul>
</div>
</div>
<div class="dot-hotsear" id="dot-hotsear">
<i class="iconfont icon-dian active"></i>
<i class="iconfont icon-dian"></i>
<i class="iconfont icon-dian"></i>
</div>
</nav>
<section >
<ul>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
<li>
<i class="iconfont icon-zuji"></i>
iPhone 6S gold 128G
</li>
</ul>
<a href="javascript:;" class="btn-clrhisty">Clear History</a>
</section>
</div>
</div>
<script src="../../../majs/mjbas/zepto.min.js"></script>
<script src="../../../majs/mjbam/mjbas/mjbasear/mbaseari-a-1.js"></script> </body>
</html>
css
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
-moz-user-select: -moz-none;
}
/* head-stus start */
.head-stus{
z-index: 100;
width: 100%;
height:20px;
position:fixed;
top:0;
left:0;
background: rgba(0,0,0,0.8);
}
/* head-stus end */
/* header start */
.head-overall{
position:fixed;
z-index:99;
width:100%;
padding-top:20px;
}
header{
z-index: 99;
width:100%;
/* height:48px;
line-height:48px; */
padding:5px 0;
text-align: center;
background: #fff;
box-sizing:content-box;
overflow: hidden;
}
header span:nth-of-type(1){
float:left;
padding:4px 18px;
}
header span:last-of-type{
float:right;
padding:7px 8px;
}
header i.iconfont{
font-size: 22px;
color:#353535;
font-weight: normal;
}
header section.inp-sear{
display: inline-block;
float: left;
position: relative;
width: calc(100% - 54px - 75px);
height:32px;
border:1px solid #f6f6f6;
border-radius: 4px;
background: #f2f2f2;
line-height: 48px;
box-sizing: content-box;
}
header section.inp-sear .icon-sousuo{
float:left;
padding: 0 8px;
font-size: 16px;
line-height: 32px;
color:#ccc;
}
header section.inp-sear .icon-yuyin,
header section.inp-sear .icon-qingchu{
float: right;
position:absolute;
right:0;
z-index:2;
padding: 0 8px;
font-size: 16px;
line-height: 32px;
color: #969696;
/*border:1px solid #000;*/
}
header section.inp-sear input{
float: left;
width: 84%;
height: 100%;
border: 0;
font-size: 16px;
line-height: 32px;
outline: none;
background: transparent;
text-indent: 4px;
}
header .active{
color:#f85200;
}
input::-webkit-input-placeholder{
color:#222222;
}
input:focus::-webkit-input-placeholder{
color:#888888;
}
/* header end */
/* con-main start */
.con-main{
padding-top:68px;
overflow: hidden;
}
.con-main nav{
width:100%;
position:relative;
margin:0 9px;
overflow: hidden;
}
.con-main nav h2{
font-size:12px;
padding-top: 5px;
font-weight:400;
}
.con-main nav .contrl-hotsear{
width:100%;
height:114px;
overflow: hidden;
}
.con-main nav .hotsear{
width:300%;
overflow: hidden;
}
.con-main nav ul{
width:33.333%;
float:left;
}
.con-main nav ul li{
float: left;
height: 34px;
width: calc(33.333% - 12px);
margin-right: 9px;
margin-top: 4px;
border: 1px solid #f0f0f0;
border-radius: 4px;
font-size: 13px;
line-height: 34px;
background: #fff;
text-align: center;
}
.con-main nav .dot-hotsear{
text-align: center;
}
.con-main nav .dot-hotsear i{
display: inline-block;
font-size: 12px;
line-height: 30px;
color: #d4d4d4;
padding: 0 2px;
transform: scale(0.75);
-webkit-transform: scale(0.75);
}
.con-main nav .dot-hotsear i.active{
color:#f96302;
}
.con-main section ul{
border-top:1px solid #ebebeb;
}
.con-main section ul li{
border-bottom:1px solid #ebebeb;
font-size:15px;
line-height: 47px;
background: #fff;
}
.con-main section ul li i{
padding:0 10px;
font-size:20px;
color:#a9a9a9;
}
.con-main section ul li i.icon-sousuo{
padding:0 10px;
font-size:17px;
color:#a9a9a9;
}
.con-main section a.btn-clrhisty{
display:block;
height: 46px;
border:1px solid #cacaca;
border-radius:4px;
margin:33px 13px 0 13px;
text-align: center;
line-height:46px;
background: #fff;
}
.con-main .sear-result{
margin-top:8px;
}
.con-main section ul li span{
float:right;
padding-right:10px;
font-size: 8px;
color:#a3a3a3;
}
.display-n{
display:none;
}
/* con-main end */
js
window.onload=function(){
var oHotsear=document.getElementById('hotsear');
var aBtns=document.getElementById('dot-hotsear').children;
var iScroll=0; //存translate位置，默认为0
var iNow=0; //第几个，默认为0
var iStartX=0;//手指放上去初始坐标
var iStartScroll=0;
document.ontouchmove = function(e){
e=e||window.event;
e.preventDefault();
}
//监听touchstart
oHotsear.addEventListener('touchstart',fnStart,false);
function fnStart(e){
iStartX = e.changedTouches[0].pageX;
iStartScroll = iScroll;
console.log(e.changedTouches[0].pageX);
}
//监听touchmove
oHotsear.addEventListener('touchmove',fnMove,false);
function fnMove(e){
var iDis = e.changedTouches[0].pageX - iStartX;//移动的位置
iScroll = iStartScroll + iDis;
toStyle();
}
//监听touchend
oHotsear.addEventListener('touchend',fnEnd,false);
function fnEnd(e){
var iDis=e.changedTouches[0].pageX-iStartX;//移动的位移
iScroll = iStartScroll + iDis;
iNow = -iScroll/window.screen.width;
iNow = iNow%1<0.3?Math.floor(iNow):Math.ceil(iNow);
if(iNow < 0){
iNow = 0;
}
if(iNow > aBtns.length - 1){
iNow = aBtns.length - 1
}
iScroll = -iNow*window.screen.width;
console.log('iNow'+iNow);
for(var i = 0;i < aBtns.length;i++){
if(i != iNow){
removeClass(aBtns[i] ,'active');
}else{
addClass(aBtns[i],'active');
}
}
oHotsear.style.WebkitTransition = oHotsear.style.transition = '0.2s';
toStyle();
}
function toStyle(){
oHotsear.style.WebkitTransform = oHotsear.style.transform = 'translateX('+iScroll+'px)';
}
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
// ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
};
};
}
huapin的更多相关文章
- swiper 实现滑动解锁
最近项目中有这样一个需求,研究了两种写法一个原生,一个使用框架 原生写法: <!DOCTYPE html> <html> <head> <meta chars ...
随机推荐
- 【转载】MySql新建账号并分配权限
在服务器的MySQL运维过程中,我们有时会遇到新建MySql账号的情况,要求新建的账号只允许某些特定的数据库操作权限,只能访问到特定的数据库,实现数据库权限的严格管理,以下以MySQL-Front管理 ...
- C#通过调用WinApi打印PDF文档类，服务器PDF打印、IIS PDF打印
其他网站下载来的类,可以用于Winform.Asp.Net,用于服务器端PDF或其他文件打印. 直接上代码: using System; using System.Collections.Generi ...
- win10 uwp 商业游戏 1.2.1
上一个游戏已经告诉大家如何写多个游戏,现在继续写这个无聊的游戏 希望大家在看这篇文章之前先看win10 uwp 商业游戏,在这个文章告诉了大家如何创建游戏. 修改数值 可以从上一篇的博客的游戏看到升级 ...
- could not read Username for 'https://github.com': No error
用idea往github上push代码的时候,突然的不能用了. 报could not read Username for 'https://github.com': No error错误. 原因不明. ...
- 2017 ACM-ICPC西安网赛B-Coin
B-Coin Bob has a not even coin, every time he tosses the coin, the probability that the coin's front ...
- Laravel 5.2 二、HTTP路由、创建控制器 与 资源路由
一.HTTP路由 所有路由都定义在 App\Providers\RouteServiceProvider 类载入的 app/Http/routes.php文件中. 1. 基本路由 简单的 Larave ...
- CSS3使用transition属性实现过渡效果
transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...
- BZOJ 2463: [中山市选2009]谁能赢呢？(智商)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3110 Solved: 2250[Submit][Status][Discuss] Descript ...
- html:常见行内标签，常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- （python）数据结构---字符串
一.概述 由一个个字符组成的有序序列. 使用单引号.双引号.三引号引住的字符序列. 不可变.线性的数据结构. 二.字符串的相关操作 1.元素访问----下标 字符串是线性的数据结构,可以使用索引去访问 ...