-
Notifications
You must be signed in to change notification settings - Fork 124
/
demo1.html
171 lines (154 loc) · 6.37 KB
/
demo1.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>绿钻“高富帅”行动</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<link rel="stylesheet" href="http://imgcache.gtimg.cn/mediastyle/mobile/event/20150114_spring_promotion/index.css">
</head>
<body class="bodybox">
<script>
window.debug = true;
</script>
<div class="wrap" id="wrap">
<div class="item item-1">
<div class="box">
<h1 class="hide">你是否也试过漫漫长夜一个人过…</h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene"></div>
<div class="text_3 sprite_global"></div>
<div class="text_4 sprite_global"></div>
<div class="text_5 sprite_global"></div>
</div>
</div>
</div>
<div class="item item-2">
<div class="box">
<h1 class="hide">救星驾到 秒变高富帅秘诀 </h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene"></div>
</div>
</div>
</div>
<div class="item item-3">
<div class="box">
<h1 class="hide">尊贵标识 终于，成为有身份的人！ </h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene"></div>
</div>
</div>
</div>
<div class="item item-4">
<div class="box">
<h1 class="hide">最有品味 追求高品质，听歌只听无损音质</h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene"><i class="sprite_global"></i><i class="sprite_global"></i><i class="sprite_global"></i></div>
<div class="desk sprite_global"></div>
</div>
</div>
</div>
<div class="item item-5">
<div class="box">
<h1 class="hide">把妹神器 以歌传情，送她空间背景音乐 </h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene">
<i class="icon_zone sprite_global"></i>
<i class="sprite_global"></i>
<i class="sprite_global"></i>
<i class="sprite_global"></i>
</div>
</div>
</div>
</div>
<div class="item item-6">
<div class="box">
<h1 class="hide">把妹成功！ 谢谢绿钻，让我登上人生巅峰 </h1>
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene"></div>
<p class="text_3">绿钻邀您加入高富帅行列<br/>高高兴兴，回家过年！</p>
<i class="boy_girl"></i>
</div>
</div>
</div>
<div class="item item-7">
<h1 class="hide">加入绿钻 成为QQ音乐世界VIP，独享高大上特权</h1>
<div class="box">
<div class="mod_container">
<p class="sprite text_1"></p>
<p class="sprite text_2"></p>
<div class="sprite scene">
<img src="http://imgcache.gtimg.cn/mediastyle/mobile/event/20150114_spring_promotion/img/man_1.png"/>
<img src="http://imgcache.gtimg.cn/mediastyle/mobile/event/20150114_spring_promotion/img/man_2.png"/>
<img src="http://imgcache.gtimg.cn/mediastyle/mobile/event/20150114_spring_promotion/img/man_3.png"/>
<img src="http://imgcache.gtimg.cn/mediastyle/mobile/event/20150114_spring_promotion/img/man_4.png"/>
<i class="tips_1"></i>
<i class="tips_2"></i>
</div>
<a class="btn_open_vip" href="javascript:;" id="J_openvip">立即开通</a>
</div>
</div>
</div>
<div class="item item-8">
<div class="box">
<i class="music_logo sprite_global"></i>
<p class="anim text_1">你是第<strong id="J_joinNum"></strong>位参与者</p>
<p class="anim text_2">分享即有机会得iPhone6</p>
<div class="anim scene"><i></i></div>
<a class="anim btn_get_gift" href="javascript:;" id="J_getGift">我也要赢iPhone6</a>
<p class="anim text_3">每天送出1台，助力高富帅，回家好过年！</p>
</div>
</div>
</div>
<!-- 加载提示 _S -->
<div class="global">
<div class="slider"><span class="sprite_global"></span></div>
</div>
<div class="mod_loading" id="loading" style="display:none">
<div class="content">
<div class="progress"><span id="progress_bg" style="width:0;"></span></div>
<p>Loading...</p>
</div>
</div>
<!-- 加载提示 _E -->
<audio autoplay="" style="height:0;width:0;display:none" ></audio>
<!-- 播放状态 _S -->
<!-- btn_pause为暂停状态 -->
<div class="sprite_global btn_play" id="J_btnMusic" style="display:none"><i class="sprite_global"></i></div>
<!-- 播放状态 _E -->
<!-- 滑块 _E -->
<div class="m_share" style="display:none;" id="shareLayer">
<!--这里的箭头指向要做判断，不同的平台指向不同-->
<!--箭头向上-->
<img id="shareimgup" src="http://imgcache.qq.com/mediastyle/mobile/event/20140318_ceremony_live/img/share_top.png?max_age=2592000" class="top" alt="点击上方分享按钮分享"/>
<!--箭头向下-->
<img id="shareimgdown" src="http://imgcache.qq.com/mediastyle/mobile/event/20140318_ceremony_live/img/share_bottom.png?max_age=2592000" class="bottom" alt="点击下方分享按钮分享" style="display:none;"/>
</div>
<script type="text/javascript" src="iSlider.js"></script>
<script>
//demo
//用法
var myslider=new iSlider({
wrap:'#wrap',
item:'.item',
onslide:function (index) {
if (index == 7) {
document.getElementById('J_joinNum').innerHTML=parseInt(Math.random()*10000);
}
}
});
console.info(myslider)
</script>
</body>
</html>