个人电脑里存了不少适合手机欣赏的图片，但是放手机里看是件很占据资源的事。鉴于家里有一台电脑经常开着，正好用来做家庭局域网共享，于是笔者就设想通过一种比较简单环保的思路。通过手机访问电脑内的图片。
首先是本地站点搭建：win+R输入mmc打开控制台，文件-添加/删除管理单元，Internet信息服务。添加确定，右侧基本信息，新建网站-把路径改了。设定一个端口号，手机浏览器就可以输入 电脑局域网ip:端口号 就可以访问电脑了。
接下来问题来了，一个个点击查看然后关闭图片是一件更不环保的事。何不做一个网页访问呢？最简单的就是选项卡-轮播图的模式。鉴于bootstrap的易适配性，就直接用它吧。
一. 初始化设置：
按钮组（ul-li-button）（太长，所有overflow hidden，需要滑动显示），按钮组是根据实际情况用DOM生成的，进入页面默认显示第一页红色高亮显示。
（1）跳转按钮：一文本输入框，一个button风格的input
（2）美图展示区
二. 页面主要实现三个功能，每个功能要实现三类相似的效果：
1. 手指点击页面可以自动切换
左右区域被点击
思路，做两个透明的绝对定位div一左一右，覆盖img层上方。点击时可以触发事件：
（1）按钮组颜色变化
（2）按钮组滑动
（3）图片切换
这里有个谁控制谁的问题，需要选取点击一瞬间的红色按钮，然后变变蓝，下一个（上一个）变红。
（ul-li-button）体系中，按钮组滑动距离应该是当前的基础上前进或后退一个li的宽度单位。但是自适应的按钮个位数和十位数宽度不同。需要分类讨论之。
图片根据变化后红色按钮内的序号改变显示的图片。
所以是序列按钮控制所有功能
2.点击按钮页面切换
事件——序列按钮被点击
（1）点击按钮颜色变化——被点击的按钮变红，其它变蓝——不难
（2）按钮组滑动目标位置——用的是当前按钮的left值，加上少算ul-lipadding的15——就算出了当前button相对于ul的偏移。然后，把此偏移作为ul相对于显示区的偏移值。（如果愿意，可以加上一个值，让按钮看起来居中）
（3）图片切换，根据变化后红色按钮内的序号改变显示的图片。
此过程1依然是序列按钮控制所有功能。
3.输入跳转
事件——跳转按钮被点击
（1）按钮变色，根据输入框内的value值，用原生js把该含有该序号的按钮选出来。变红
（2）按钮组滑动——跟前面一样
（2）图片切换，跟前面一样。
此过程是输入框控制页面的所有功能。
根据这个思想，大致的功能就实现了。
三 .有几个原则：
（1）动画控制：手持设备的特性允许用户以很快的手速点击屏幕，频繁地触发事件导致按钮不能停止。可以用判断动画函数来阻止运行。但是这样做让页面生硬。可以考虑用淡出——改变图片路径（延迟执行）——淡入的方式，及解决了快手速用户问题，也能在一定程度上提升柔和感，
（2）极限控制，当第一页和最后一页时，应阻止用户再操作。
（3）图片为了网页应该做一定的修改，本例采用的图片命名为xxx (1) ，xxx (2)。。。。的方式，因为有一个流水号所以DOM操作起来很方便。
四. 进一步应用
写了那么多代码，只用在一个套图页面上面，就太不环保了。所以把它们封装为函数，这样就可以只要有图片路径和图片数量，就可以自动生成这样的页面了。为了表示敬意，就以图片来源的的网站名作为函数名。传入两个参数：url 和 imgNum分别代表图片路径和套图数量。
url是一个字符串，必须满足下面要求：
图片文件名必须夹杂 “（流水号）”，对文件夹名等无要求，比如 “文静/wenjing().jjpg” 系列流水号由js生成。所以不用写。
实现手段是slice()方法。
五问题
首次加载时动画显示滞后，是因为需要时间下载所致，可以通过适当延长动画时间。在家庭共享环境下，可以忽略这个问题。
可能存在因为bootstrap特性，所以有若干自定样式的表现不符合设计的规范。
效果图：（适配ip6）
修改说明：可能是博客园认为我的图片有广告的嫌疑，所以全部消除掉。——其实图片都是完全合法的。
demo地址：（建议手机观看）
http://djtao.top/ugirl/
代码清单html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<!DOCTYPE html>
<
html
lang="zh-cn">
<
head
>
<!--页面编码 -->
<
meta
charset="UTF-8">
<!--低版本浏览器模拟渲染-->
<
meta
name="viewport" content="width=device-width, initialscale=
1
,
maximumscale
=
1
,
user-scalable
=
no
">
<
meta
name="viewport" content="width=deviece-width,initial-scale=1">
<!--支持国产浏览器的高速渲染-->
<
meta
name="renderer" content="Webkit">
<!--在此进行SEO设置：作者、关键词、描述-->
<
meta
name="author" content="djtao">
<
meta
name="keywords" content="djtao">
<
meta
name="description" content="djtao">
<
title
>Ugirl</
title
>
<!--bootstrap-->
<!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除 -->
<!--[if lt IE 9]>
<script src="scripts/html5.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
<!--bootstrap样式文件 -->
<
link
rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--自定义样式文件 -->
<
link
rel="stylesheet" href="styles/css.css">
<!--基于jQuery的脚本文件 -->
<
script
src="scripts/jquery.min.js"></script>
<!-- bootstrap的jq插件 -->
<
script
src="bootstrap/js/bootstrap.min.js"></script>
<!--自定义脚本文件 -->
<
script
src="scripts/js.js"></script>
</
head
>
<
body
class="container">
<
header
>
<
h1
>Ugirl <
small
>专业的秘密</
small
></
h1
>
</
header
>
<
div
id="main" class="row">
<
div
id="btn-group" class="col-xs-6">
<
ul
id="list" class="list-inline"></ul>
</
div
>
<
div
class="col-xs-6">
<
form
class="form-horizontal">
<
div
class="form-group has-success">
<
div
class="col-xs-6"><input class="form-control" id="num" style="width:100%" col="2" type="text"></div>
<
div
class="col-xs-2"><input type="button" value="jump" class="btn btn-default">
</
div
>
</
form
>
</
div
>
</
div
>
</
div
>
<
div
class="row">
<
div
id="box" class="col-xs-12">
<
div
id="last"></div>
<
div
id="next"></div>
<
img
class="img-responsive" src="img/wenjing/wenjing (1).jpg">
</
div
>
</
div
>
</
body
>
</
html
>
|
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
body{
background
:
#f2f2f2
;
}
#box{
position
:
relative
;
}
#next{
width
:
50%
;
height
:
500px
;
position
:
absolute
;
left
:
50%
;
}
#last{
width
:
50%
;
height
:
500px
;
position
:
absolute
;
}
#btn-group{
height
:
40px
;
overflow
:
hidden
;
}
#list{
list-style
:
none
;
position
:
absolute
;
}
#list>li{
list-style
:
none
;
float
:
left
;
position
:
relative
;
}
#main{
margin-top
:
20px
;
}
|
javascript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
function
Ugirl(url,imgNum){
var
aBtn=document.getElementsByTagName('button');
$(
'#list'
).css(
'width'
,(imgNum*(52))+
'px'
);
var
str=url;
var
index=0;
for
(i=0;i<str.length;i++){
if
(str.slice(i-1,i)==
'('
){
index=i;
}
}
var
a=str.slice(0,index);
var
b=str.slice(index);
//分割url字符串
for
(j=1;j<=imgNum;j++){
var
$btn = $('<li><button class="btn btn-primary">'+j+'</button></li>');
$btn.appendTo($(
'#list'
));
}
aBtn[0].className=
'btn btn-danger'
;
//按钮初始化设置
//手指点击事件
$(
'#box div'
).click(
function
(){
if
($(
this
).attr(
'id'
)==
'next'
){
//下一个
if
($(
'.btn-danger'
) .html()==imgNum){
alert(
'到底了哦'
);
return
false;
}
liWidth=44;
liWidth2=52;
$(
'.btn-danger'
).removeClass().addClass(
'btn btn-primary'
)
.parent().next().children().removeClass().addClass(
'btn btn-danger'
);
}
else
if($(this).attr('id')=='last'){//上一个
if
($(
'.btn-danger'
) .html()==1){
alert(
'到顶了哦'
);
return
false;
}
else
{
$(
'.btn-danger'
).removeClass().addClass(
'btn btn-primary'
)
.parent().prev().children().removeClass().addClass(
'btn btn-danger'
);
liWidth=-44;
liWidth2=-52;
}
}
else
{
return
false;
};
//个位数按钮和10位数按钮宽度不同。所以设置两个
if
($(
'.btn-danger'
) .html()<=10){
$(
'#list'
).animate({left:
'-='
+liWidth+
'px'
},400);
}
else
if($('.btn-danger') .html()>10){
$(
'#list'
).animate({left:
'-='
+liWidth2+
'px'
},400);
}
//大图切换
$(
'img'
).fadeOut(200);
setTimeout(
function
(){
$(
'img'
).attr(
'src'
,a+$(
'.btn-danger'
) .html()+b);
},220)
$(
'img'
).fadeIn(300);
});
//选项按钮点击
$(
'button'
).click(
function
(){
$(
'button'
).attr(
'class'
,
'btn btn-primary'
);
$(
this
).attr(
'class'
,
'btn btn-danger'
);
var
moveLength=-$(this).parent().position().left+15;
$(
'#list'
).animate({left:moveLength+
'px'
},400);
$(
'img'
).attr(
'src'
,a+$(
'.btn-danger'
) .html()+b);
});
//跳转按钮点击
$(
'.btn-default'
).click(
function
(){
var
s=$('#num').val();
if
(s<1||s>imgNum){
return
false;
alert(
'没有那么多哦'
)
}
//极限设置
var
pageNum=$('.btn-danger') .html();
$(
'img'
).attr(
'src'
,a+s+b);
$(
'#list'
).children().children().removeClass().addClass(
'btn btn-primary'
);
$(aBtn[s-1]).removeClass().addClass(
'btn btn-danger'
);
var
moveLength=-$(aBtn[s-1]).parent().position().left+15;
$(
'#list'
).animate({left:moveLength+
'px'
},400);
})
}
$(
function
(){
Ugirl(
'img/wenjing/wenjing ().jpg'
,65);
})
//在其它页面也引入了Ugirl函数后，就可以直接调用直接调用
|
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
