类似qq的侧滑功能
来源：互联网 发布：易语言采集源码 编辑：程序博客网 时间：2024/04/28 13:20
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/shoppingcart.css"/>
<style>.sc_list{
width: 100%;
margin-bottom: 1.1rem;
}
.mui-draggable,.mui-off-canvas-right,.mui-inner-wrap,.mui-scroll-wrapper{
height: 2.3rem;
}
.mui-off-canvas-right{
width: 1.2rem;
height: 2.3rem;
color: white;
font-size: 0.24rem;
text-align: center;
line-height: 2.3rem;
background: white;
}
.mui-off-canvas-right .mui-scroll-wrapper .mui-scroll .del{
width:1.2rem;
height: 2.3rem;
background: #ff3434;
color: white;
font-size: 0.24rem;
line-height: 2.3rem;
text-align: center;
}
.mui-inner-wrap,.mui-scroll-wrapper .mui-scroll{
width: 100%;
height: 2.3rem;
background: white;
display: flex;
}
.mui-draggable{
position: relative;
margin-bottom: 0.1rem;
}
.mui-draggable .mui-off-canvas-right{
position: absolute;
right: 0;
top: 0;
z-index: 2;
background: red;
}
.mui-scroll-wrapper{
position: static;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll{
display: flex;
display: -webkit-flex;
width: 100%;
background: white;
height: 2.3rem;
padding: 0.3rem 0.28rem 0.3rem 0.28rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .icon_select_left{
width: 0.46rem;
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: relative;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .icon_select_left span{
position: absolute;
left: 0rem;
top: 0.72rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img{
width: 1.7rem;
height: 1.7rem;
background: #cecece;
margin-right: 0.2rem;
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: relative;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img .icon_sold{
width: 1.2rem;
height: 1.2rem;
background: url(../images/sellout_120x120@2x.png) no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
margin-left: 0.25rem;
margin-top: 0.25rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img img{
width: 100%;
height: 100%;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right{
flex: 1;
-webkit-flex: 1;
position: relative;
}
.sc_title{
width: 4.58rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.28rem;
color: #333333;
line-height: 0.44rem;
}
.sc_fu{
font-size: 0.22rem;
color: #888888;
line-height: 0.34rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom{
position: absolute;
bottom: 0.08rem;
height: 0.5rem;
line-height: 0.5rem;
width: 100%;
}
.sc_right_bottom .mui-pull-left{
font-size: 0.28rem;
/*font-weight: bold;*/
color: #FB1414;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right button{
width: 0.5rem;
height: 0.5rem;
border: 1px solid #999999;
border-radius: 0;
float: left;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_dishui{
background: url(../images/redu_off_20x20@2x.png) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .icon_dishei{
background: url(../images/redu_on_20x20@2x.png) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_addhui{
background: url(../images/add_off_20x20@2x.png) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_addhei{
background: url(../images/add_on_20x20@2x.png) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .num{
width: 1.2rem;
display: inline-block;
height: 0.5rem;
border: 1px solid #999999;
text-align: center;
font-size: 0.28rem;
color: #333333;
line-height: 0.48rem;
float: left;
margin: 0 0.06rem;
}</style>
</head>
<body>
<div class="sc_list"><div class="mui-draggable">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="del">
删除
</div>
</div>
</div>
</aside>
<div class="mui-inner-wrap">
<div class=" mui-scroll-wrapper">
<div class="mui-scroll">
<div class="icon_select_left">
<span class="icon_noselect"></span>
<span class="icon_select icon_hid"></span>
</div>
<div class="sc_img">
<img src=""/>
</div>
<div class="sc_right">
<p class="sc_title">最美天气预报员，最美天气预报员，最美天气预报员，</p>
<p class="sc_fu">颜色随机 叶子香型</p>
<div class="sc_right_bottom">
<div class="mui-pull-left">
¥<span>26.00</span>
</div>
<div class="mui-pull-right">
<button class=""></button>
<span class="num">1</span>
<button class="icon_addhei"></button>
</div>
</div>
</div>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shoppingcart.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init({
swipeBack: false,
});
</script>
</body>
<script>$(function(){
//选择
$('.sc_list').on('click','.mui-scroll .icon_select_left',function(){
$(this).find('.icon_select').toggleClass('icon_hid');
$(this).find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_img').on('click',function(){
$(this).siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_right p').on('click',function(){
$(this).parent('.sc_right').siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).parent('.sc_right').siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_right_bottom .mui-pull-left').on('cilck',function(){
$(this).parents('.sc_right').siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).parents('.sc_right').siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
})
//加减
var num;
mui('.sc_list').on('touchstart','button',function(e){
num = parseInt($(this).siblings('.num').text());
if($(this).index()==0&&num>1){
num=num-1;
if(num==1){
$(this).addClass('icon_dishui').removeClass('icon_dishei');
}
$(this).siblings('.num').text(num);
}else if($(this).index()==2){
num=num+1;
$(this).siblings('.num').text(num);
$(this).siblings('button').addClass('icon_dishei').removeClass('icon_dishui');
}
});
//定义减号
for(var i =0;i<$('.sc_list .mui-draggable').length;i++){
if($('.num:eq('+i+')').text()==1){
$('.num:eq('+i+')').siblings('button:eq(0)').addClass('icon_dishui');
}else if($('.num:eq('+i+')').text()>1){
$('.num:eq('+i+')').siblings('button:eq(0)').addClass('icon_dishei');
}
}
//全选
var selectflag=1;
$('.sc_foot .mui-pull-left').on('tap',function(){
$(this).find('.icon_select_div span').toggle();
if(selectflag%2!=0){
$('.icon_select').removeClass('icon_hid');
$('.icon_noselect').addClass('icon_hid');
}else{
$('.icon_select').addClass('icon_hid');
$('.icon_noselect').removeClass('icon_hid');
$('.count_price').text('0.00')
}
selectflag++;
})
//高度
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
$('.num').css({
'line-height':'0.58rem'
})
}
var startX,startY,endX,endY,X,Y,wid=0;
$('.sc_list .mui-draggable').on('touchstart',function(e){
// alert('a')
var touch=e.originalEvent.targetTouches[0];
startX=touch.pageX;
startY=touch.pageY;
}).on('touchend',function(e){
var touch = e.originalEvent.changedTouches[0];
endX=touch.pageX;
endY=touch.pageY;
X=endX-startX;
Y=endY-startY;
if(X<-50&&Y<50){
$(this).find('aside').css({
'visibility':'visible'
});
$(this).find('.mui-inner-wrap').animate({
'margin-left':'-1.2rem'
})
$(this).siblings('.mui-draggable').find('aside').css({
'visibility':'hidden'
});
$(this).siblings('.mui-draggable').find('.mui-inner-wrap').animate({
'margin-left':'0'
});
}else if(X>50&&Y<50){
$(this).find('aside').css({
'visibility':'hidden'
});
$(this).find('.mui-inner-wrap').animate({
'margin-left':'0'
})
}
})
$('.mui-scroll').css('color','red');
})
</script>
</html>
- 类似qq的侧滑功能
- 【转载】类似QQ功能的界面
- 实现类似QQ记住密码的功能
- QT实现类似QQ的截图功能
- 类似QQ的好友移动功能
- 实现类似QQ侧滑的SlidingLayout
- 类似qq闪动功能
- 类似QQ组菜单功能
- 实现类似qq扫一扫功能
- ExpandableListView的用法，类似qq的联系人功能
- C#如何实现类似QQ那样靠边隐藏的功能
- C#类似QQ窗体抖动功能的实现
- 类似qq登陆 记住密码功能的实现
- 【转载】用C#语言实现类似QQ的截图功能
- 类似QQ表情的功能，包括动态绑定图片
- 类似QQ贴边掩藏功能的实现（一）
- 类似QQ贴边掩藏功能的实现（二）
- 类似QQ贴边掩藏功能的实现（三）
- Android 5.0后 Heads-Up Notification
- Java消息中间件---拓展篇
- 整个网页保存为图片
- fluentd安装配置
- openstack删除僵尸卷
- 类似qq的侧滑功能
- Spring事务管理（详解+实例）
- 提取水平与垂直线
- 启用事务操作，解决批量插入或更新sqlite，mssql等数据库耗时问题
- Codeforces Round #442 (Div. 2) E. Danil and a Part-time Job （dfs序+线段树）
- layui分页有的时候无法正常渲染解决方案
- intent传bitmap
- Git出现Unable to create 'E:/xxx/.git/index.lock': File exists.的解决办法
- 基础集合论 第三章 2 自然数集
