lixin-web
Version:
vue and bootstrap
230 lines (201 loc) • 5.35 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>利信web登录器</title>
<link href="css/weblogin.css" rel="stylesheet">
</head>
<body>
<header>
<img src="img/weblogin/logo.png">
</header>
<section class="main bigOne">
<div class="wrap textC">
<img src="img/weblogin/aTit.png" class="aTit">
<img src="img/weblogin/aImg.png">
<a href="/weblogin/lixin.air" class="aBtn"></a>
<p>版本：1.0 <br/>
MD5: E4A38F26EA9288A6480AE857897B5324
</p>
</div>
</section>
<section class="main bigTwo">
<div class="wrap textC" id="play">
<img src="img/weblogin/bTit.png" class="bTit">
<div class="bComputer">
<img src="img/weblogin/bImg.png">
<div class="imgBox">
<ul class="imgList">
<li style="display:block;"><img src="img/weblogin/img01.jpg"></li> <!-- style="opacity:1;filter:alpha(opacity:100);" -->
<li><img src="img/weblogin/img02.jpg"></li>
<li><img src="img/weblogin/img03.jpg"></li>
</ul>
</div>
</div>
<ol class="BtnList">
<li class="active"><a href="javascript:;">安装好利信登录器后，<br/>双击“利信快速登录器”图标<p>1</p></a></li>
<span class="OnArrow"></span>
<li><a href="javascript:;">单击“立即登录”按钮，即可极速访问利信娱乐官网，一次下载，永久自动更新<p>2</p></a></li>
<span></span>
<li><a href="javascript:;">利信快速登录器将会根据您当前的网络环境，智能为您推荐3条最快登录地址<p>3</p></a></li>
<span></span>
</ol>
</div>
</section>
<footer>
<div class="wrap foot">
<p>Copyright © 2015 www.GameLOGO.com Corporation, All Rights Reserved.</p>
<img src="img/weblogin/logoMoer.png">
</div>
</footer>
<script type="text/javascript" src="plugins/official/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="plugins/official/jquery.scrollify.js"></script>
<script type="text/javascript">
function getByClass(oParent, sClass) {
var aEle = oParent.getElementsByTagName('*');
var re = new RegExp('\\b' + sClass + '\\b');
var arr = [];
for (var i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
function getStyle(obj, name) {
return (obj.currentStyle || getComputedStyle(obj, false))[name];
}
//move
function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设所有的都到了
for(var name in json)
{
if(name=='opacity')
{
var cur=Math.round(parseFloat(getStyle(obj, name))*100);
}
else
{
var cur=parseInt(getStyle(obj, name));
}
var speed=(json[name]-cur)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[name]) //碰到了没到的
{
bStop=false;
}
if(name=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[name]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)
{
fnEnd();
}
}
}, 30);
}
function addEvent(obj, sEv, fn)
{
if(obj.attachEvent){
obj.attachEvent('on'+sEv, fn);
}else{
obj.addEventListener(sEv, fn, false);
}
}
//给元素加class
function addClass(obj,sClass){
if(!obj.className){
obj.className = sClass;
return;
}
var aClass = obj.className.split(' ');
for(var i=0; i<aClass.length; i++){
if(aClass[i]==sClass)return;
}
obj.className += ' ' + sClass;
}
//删除class
function removeClass(obj,sClass){
var aClass = obj.className.split(' ');
if(!aClass[0])return;
for(var i=0; i<aClass.length; i++){
if(aClass[i]==sClass){
aClass.splice(i,1);
obj.className = aClass.join(' ');
return;
}
}
};
</script>
<script type="text/javascript">
//JavaScript Document
$(function(){
$.scrollify({
section:".main"
});
$(".scroll,.scrollDown").click(function(e) {
e.preventDefault();
$.scrollify.next();
});
// $('#play').fadeSlider({ev: 'click', auto: true});
});
//tab
window.onload=function(){
var oLoBox=getByClass(document, 'bigTwo')[0];
var aImgLi=getByClass(oLoBox, 'imgList')[0].getElementsByTagName('li');
var aBtn=getByClass(oLoBox, 'BtnList')[0].getElementsByTagName('li');
var aSpan=getByClass(oLoBox, 'BtnList')[0].getElementsByTagName('span');
var timer=null;
var iNow=0;
// console.log(aSpan);
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;;
aBtn[i].onmouseover=function(){
clearInterval(timer)
if(iNow==this.index){
return;
}
iNow=this.index;
tab();
}
aBtn[i].onmouseout = function(){
timer = setInterval(autoPlay, 2500);
}
}
function tab(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aSpan[i].className='';
aImgLi[i].style.display='none';
}
aBtn[iNow].className='active';
aSpan[iNow].className='OnArrow';
// aImgLi[iNow].style.display='block';
$(aImgLi[iNow]).fadeIn();
}
function autoPlay(){
iNow++;
if(iNow>=aBtn.length){
iNow=0;
}
tab();
}
// clearInterval(timer);
timer=setInterval(autoPlay, 2500);
}
</script>
</body>
</html>