HTML5之JavaScript简介（二）

一、用JS实现瀑布流效果
HTML5之JavaScript简介（二）
index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}

#main{
position: relative;
}

#main .box{
padding: 15px 0 0 15px;
float: left;
}

#main .box .pic{
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 5px #ddd;
width: 165px;
}

#main .box .pic img{
width: 165px;
height: auto;
}

index.js

/**
 * Created by apple on 15/9/10.
 */

function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}

window.onload = function(){
// 实现瀑布流布局
   waterFall('main', 'box');
// 造数据
var dataImg = {"data":[{"src":"0.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"10.jpg"}]};
// 动态的加载图片
   window.onscroll = function(){
// 具备滚动的条件
if(checkWillScroll){
for(var i=0; i<dataImg.data.length; i++){
// 创建div
var newBox = document.createElement('div');
          newBox.className = 'box';
          $('main').appendChild(newBox);
// 创建里面的盒子
var newPic = document.createElement('div');
          newPic.className = 'pic';
          newBox.appendChild(newPic);
// 创建img标签
var img = document.createElement('img');
          img.src = 'images/' + dataImg.data[i].src;
          newPic.appendChild(img);
       }
         waterFall('main', 'box');
     }
   }
}

// 实现瀑布流布局
function waterFall(parent, box){
// 取出所有的盒子
var allBoxs = $(parent).getElementsByClassName(box);
// 单个盒子的宽度
var boxW = allBoxs[0].offsetWidth;
// 取得浏览器的宽度
var screenW = document.body.clientWidth;
// 求出列数
var cols = Math.floor(screenW/boxW);
// 让父标签居中
    $(parent).style.cssText = 'width:'+boxW *cols +'px; margin:0 auto;';

// 定位
// 存放每一列的高度
var heightArr = [];
for(var i=0; i<allBoxs.length; i++){
if(i<cols){// 第一行
var boxHeight = allBoxs[i].offsetHeight;
           heightArr.push(boxHeight);
        }else{// 剩余行
// 拿到最矮盒子的高度
var minBoxH = Math.min.apply(null, heightArr);
// 拿到最矮盒子对应的索引
var minBoxIndex = getMinIndex(minBoxH, heightArr);
// 对盒子进行定位
            allBoxs[i].style.position = 'absolute';
            allBoxs[i].style.top = minBoxH + 'px';
            allBoxs[i].style.left = boxW * minBoxIndex + 'px';
// 改变高度
            heightArr[minBoxIndex] += allBoxs[i].offsetHeight;
        }
    }
    console.log(heightArr, minBoxH, minBoxIndex);
}

// 取出索引
function getMinIndex(val, arr){
for(var i=0; i<arr.length; i++){
if(arr[i] == val){
return i;
        }
    }
}

// 检查是否具备滚动条件
function checkWillScroll(){
// 求最后一个盒子的offsettop + 自身的一半
var allBoxs = $('main');
var lastBox =  allBoxs[allBoxs.length - 1];
var lastBoxDis = lastBox.offsetTop + Math.floor(lastBox.offsetHeight/2);
// 求出页面偏离的高度(标准模式和混杂模式)
var scrollTopH = document.body.offsetTop || document.documentElement.offsetTop;
// 求出浏览器的高度
var screenH = document.body.clientHeight || document.documentElement.clientHeight;
return lastBoxDis < (scrollTopH + screenH) ? true : false;
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用JS实现瀑布流效果</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--最外层-->
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/17.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/21.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/22.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/23.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/24.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/25.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/26.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/27.jpg">
</div>
</div>
</div>

<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

二、用CSS3实现瀑布流效果
HTML5之JavaScript简介（二）
index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}

#main{
/*-webkit-column-count: 5;*/
/*-moz-column-count: 5;*/
/*column-count: 5;*/

-webkit-column-width: 202px;
-moz-column-width: 202px;
column-width: 202px;
}

#main .box{
padding: 15px 0 0 15px;
}

#main .box .pic{
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 5px #ddd;
width: 165px;
}

#main .box .pic img{
width: 165px;
height: auto;
}

index.js

/**
 * Created by apple on 15/9/10.
 */

function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}

window.onload = function(){
// 实现瀑布流布局
   waterFall('main', 'box');
// 造数据
var dataImg = {"data":[{"src":"0.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"10.jpg"}]};
// 动态的加载图片
   window.onscroll = function(){
// 具备滚动的条件
if(checkWillScroll){
for(var i=0; i<dataImg.data.length; i++){
// 创建div
var newBox = document.createElement('div');
          newBox.className = 'box';
          $('main').appendChild(newBox);
// 创建里面的盒子
var newPic = document.createElement('div');
          newPic.className = 'pic';
          newBox.appendChild(newPic);
// 创建img标签
var img = document.createElement('img');
          img.src = 'images/' + dataImg.data[i].src;
          newPic.appendChild(img);
       }
         waterFall('main', 'box');
     }
   }
}

// 实现瀑布流布局
function waterFall(parent, box){
// 取出所有的盒子
var allBoxs = $(parent).getElementsByClassName(box);
// 单个盒子的宽度
var boxW = allBoxs[0].offsetWidth;
// 取得浏览器的宽度
var screenW = document.body.clientWidth;
// 求出列数
var cols = Math.floor(screenW/boxW);
// 让父标签居中
    $(parent).style.cssText = 'width:'+boxW *cols +'px; margin:0 auto;';

// 定位
// 存放每一列的高度
var heightArr = [];
for(var i=0; i<allBoxs.length; i++){
if(i<cols){// 第一行
var boxHeight = allBoxs[i].offsetHeight;
           heightArr.push(boxHeight);
        }else{// 剩余行
// 拿到最矮盒子的高度
var minBoxH = Math.min.apply(null, heightArr);
// 拿到最矮盒子对应的索引
var minBoxIndex = getMinIndex(minBoxH, heightArr);
// 对盒子进行定位
            allBoxs[i].style.position = 'absolute';
            allBoxs[i].style.top = minBoxH + 'px';
            allBoxs[i].style.left = boxW * minBoxIndex + 'px';
// 改变高度
            heightArr[minBoxIndex] += allBoxs[i].offsetHeight;
        }
    }
    console.log(heightArr, minBoxH, minBoxIndex);
}

// 取出索引
function getMinIndex(val, arr){
for(var i=0; i<arr.length; i++){
if(arr[i] == val){
return i;
        }
    }
}

// 检查是否具备滚动条件
function checkWillScroll(){
// 求最后一个盒子的offsettop + 自身的一半
var allBoxs = $('main');
var lastBox =  allBoxs[allBoxs.length - 1];
var lastBoxDis = lastBox.offsetTop + Math.floor(lastBox.offsetHeight/2);
// 求出页面偏离的高度(标准模式和混杂模式)
var scrollTopH = document.body.offsetTop || document.documentElement.offsetTop;
// 求出浏览器的高度
var screenH = document.body.clientHeight || document.documentElement.clientHeight;
return lastBoxDis < (scrollTopH + screenH) ? true : false;
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用CSS3实现瀑布流效果</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--最外层-->
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/17.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/21.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/22.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/23.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/24.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/25.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/26.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/27.jpg">
</div>
</div>
</div>

<!--<script src="js/index.js" type="text/javascript"></script>-->
</body>
</html>

三、认识jQuery
HTML5之JavaScript简介（二）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--
 JS存在的问题:
 1.存在兼容性问题
 2.DOM操作相对较为复杂

 jQuery的优势: js的类库 全世界都在用
 1.轻松进行DOM操作
 2.轻松解决浏览器兼容问题
 3.轻松实现动画
 -->
</head>
<body>
<div>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<p>321211221231</p>
<div>
<img src="image/img_01.jpg">
<img src="image/img_01.jpg">
<img src="image/img_01.jpg">
<img src="image/img_01.jpg">
<img src="image/img_01.jpg">
<img src="image/img_01.jpg">
</div>
</div>

<button>显示</button>
<button>隐藏</button>
<button>来回切换</button>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 拿到img标签
var img = $('img');
// 拿到img标签中的属性
 console.log($('img').attr('src'));
// 修改img标签中的属性
 $('img').attr('src', 'image/img_02.jpg');
// 修改所有图片的大小
 $('img').attr('width', '100px');

// 2.所有的css选择器在jQuery中都适用
// 查看p中的文字,并修改
 console.log($('div>p').text());
 $('div>p').text('我是MT');

// 常用的事件
// 当页面加载完毕
 $(window).on("load", function(){
// alert('页面加载完毕');
 });

// 给按钮绑定事件
 $('button').eq(0).on('click', function(){
 $('img').show();
 });

 $('button').eq(1).on('click', function(){
 $('img').hide();
 });

 $('button').eq(2).on('click', function(){
 $('img').toggle(2000);
 });

// 当屏幕滚动的时候调用
 $(window).on('scroll', function(){
// alert('您滚动了屏幕!');
 });


//遍历数组
var numberArr = [10,21,34,656,6776,3232];
 $.each(numberArr, function(index, value){
 console.log(index, value);
 });

// 取出6776对应的索引
var index = $.inArray(6776, numberArr);
 console.log(index);

// 用jQuery写css样式
 $('div>p').css({
'background' : 'red',
'font-size' : '100px',
'border' : '1px solid #ddd'
 });

</script>
</body>
</html>

四、用jQuery实现瀑布流效果
HTML5之JavaScript简介（二）

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}

#main{
position: relative;
}

#main .box{
padding: 15px 0 0 15px;
float: left;
}

#main .box .pic{
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 5px #ddd;
width: 165px;
}

#main .box .pic img{
width: 165px;
height: auto;
}

index.js


$(window).on('load',function(){
// 实现瀑布流
   waterFall();

// 造数据
var dataImg = {"data":[{"src":"0.jpg"},{"src":"4.jpg"},{"src":"7.jpg"},{"src":"10.jpg"}]};
// 滚动的时候加载图片
 $(window).on('scroll', function(){
if(checkWillScroll){
         console.log('-----');
         $.each(dataImg.data, function(index, value){
var newBox = $('<div>').addClass('box').appendTo('#main');
var newPic = $('<div>').addClass('pic').appendTo($(newBox));
             $('<img>').attr('src', 'images/'+ $(value).attr('src')).appendTo($(newPic));
         })
         waterFall();
     }
 })
});


// 实现瀑布流
function waterFall(){
// 让父标签居中
// 拿到盒子的宽度
var allBoxs = $('#main>div');
var boxW = allBoxs.eq(0).outerWidth();
// 拿到浏览器的宽度
var screenW = $(window).width();
// 求出列数
var cols = Math.floor(screenW/boxW);
// 设置父标签的宽度并居中
    $('#main').css({
'width' : boxW * cols +'px',
'margin': '0 auto'
    });
// 盒子定位
var heightArr = [];
    $.each(allBoxs,function(index, value){
var boxHeight = allBoxs.eq(index).outerHeight();
if(index < cols){// 第一行
           heightArr[index] = boxHeight;
       }else{// 第二行
// 取出最矮的盒子
var minBoxH = Math.min.apply(null, heightArr);
// 取出最矮盒子对应的索引
var minBoxIndex = $.inArray(minBoxH, heightArr);
// 定位
var boxs = allBoxs[index];
           $(boxs).css({
'position':'absolute',
'top': minBoxH + 'px',
'left': minBoxIndex *boxW + 'px'
           });
// 更新盒子的高度
           heightArr[minBoxIndex] += boxHeight;
       }

    })

}

// 检测是否具备滚动的条件
function checkWillScroll(){
// 拿到最后一个盒子
var lastBox = $('#main>div').last();
var lastBoxDis = $(lastBox).offset().top + Math.floor($(lastBox).outerHeight()/2);
var topScrollH = $(window).offset().top;
var screenH = $(window).height();
    console.log(lastBox,lastBoxDis,topScrollH,screenH);
return lastBoxDis < (topScrollH + screenH)? true:false;
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用jQuery实现瀑布流效果</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--最外层-->
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/17.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/21.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/22.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/23.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/24.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/25.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/26.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/27.jpg">
</div>
</div>
</div>

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

五、小码哥官网快速开发
HTML5之JavaScript简介（二）

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}

body{
padding-top:50px;
}

#main{
margin: 30px;
}

#main .container-fluid{
text-align: center;
}

#main .container-fluid .row img{
width: 140px;
height: 140px;
}

#main .container-fluid .row h2,p{
margin: 10px 0;
}

#main .container-fluid .row p.intro{
text-align: left;
}

#tab{
margin-top: 24px;
}

#tab .tab-content .feature-text{
margin-top: 130px;
}

#tab .tab-content .feature-text h2{
color: #428bca;
font-size: 45px;
}

#tab .tab-content .feature-text span{
font-size: 25px;
}


@media screen and (max-width: 1000px) {
#tab .tab-content .feature-text{
margin-top: 20px;
}
}

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>广州小码哥教育集团</title>
<link href="source/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">广州小码哥教育集团</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">简介</a></li>
<li><a href="#">综述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学院 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#iOS">iOS学院</a></li>
<li role="separator" class="divider"></li>
<li><a href="#java-ee">Java学院</a></li>
<li role="separator" class="divider"></li>
<li><a href="#ui">网页UI学院</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about-xmg">关于</a></li>
</ul>
</div>
</div>
</nav>

<!--滚动图片-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 底部的圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- 滚动的内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/nav_01.jpg" alt="iOS学院">
</div>
<div class="item">
<img src="images/nav_02.jpg" alt="Java学院">
</div>
<div class="item">
<img src="images/nav_03.jpg" alt="网页UI学院">
</div>
</div>

<!-- 控制 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>

<!--主要内容-->
<div id="main">
<!--中间三大块-->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-circle" src="images/apple.png" alt="iOS学院">
<h2>iOS学院</h2>
<p class="intro">iOS学院,又称大神学院,学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"</p>
<p><a href="#" class="btn btn-default" role="button">立即咨询</a></p>
</div>
<div class="col-md-4">
<img class="img-circle" src="images/java.png" alt="Java学院">
<h2>Java学院</h2>
<p class="intro">Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
<p><a href="#" class="btn btn-default" role="button">立即咨询</a></p>
</div>
<div class="col-md-4">
<img class="img-circle" src="images/web.png" alt="网页UI学院">
<h2>网页UI学院</h2>
<p class="intro">网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p>
<p><a href="#" class="btn btn-default" role="button">立即咨询</a></p>
</div>
</div>
</div>
<!--标签页-->
<div id="tab">
<!--tab的头部 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#iOS" aria-controls="iOS" role="tab" data-toggle="tab">iOS学院</a></li>
<li role="presentation"><a href="#java-ee" aria-controls="java" role="tab" data-toggle="tab">Java学院</a></li>
<li role="presentation"><a href="#ui" aria-controls="ui" role="tab" data-toggle="tab">UI学院</a></li>
</ul>
<!-- Tab 面板 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="iOS">
<div class="row">
<div class="col-md-7 feature-text">
<h2 class="feature-word">iOS学院<span class="text-muted">史上最具逼格</span></h2>
<p class="lead">iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="images/safari-logo.jpg" alt="iOS学院">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="java-ee">
<div class="row">
<div class="col-md-5">
<img class="img-responsive" src="images/firefox-logo.jpg" alt="Java学院">
</div>
<div class="col-md-7 feature-text">
<h2 class="feature-word">Java学院<span class="text-muted">史上最具实力</span></h2>
<p class="lead">Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ui">
<div class="row">
<div class="col-md-7 feature-text">
<h2 class="feature-word">UI设计学院<span class="text-muted">史上最具美感</span></h2>
<p class="lead">UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p>
</div>
<div class="col-md-5">
<img class="img-responsive" src="images/safari-logo.jpg" alt="iOS学院">
</div>
</div>
</div>
</div>
</div>

</div>

<!--分割线-->
<hr class="divider">
<!--尾部-->
<footer>
<p class="pull-right">
<a href="#top">回到顶部</a>
</p>
<p style="float: left">&copy; 2015 广州小码哥教育集团</p>
</footer>
<!--关于 弹出框-->
<div class="modal fade" id="about-xmg" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">关于小码哥</h4>
</div>
<div class="modal-body">
<p>广州小码哥教育集团，是一家从事高级IT人才培训的教育公司。2015年5月，李明杰MJ创办了小码哥，立志要打造一个卓越的IT培训品牌， 给广大的IT学子提供高质量高水平的IT技术教育培训及服务。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">M了个J</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script src="source/js/jquery-1.11.3.min.js"></script>
<script src="source/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $('#bs-example-navbar-collapse-1 .dropdown-menu a').click(function(){
var href = $(this).attr('href');
// 实现动态跳转
 $('#tab .nav a[href="'+ href +'"]').tab('show');
 });
</script>


</body>
</html>

六、OC中调用HTML

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (nonatomic, weak) UIActivityIndicatorView *showView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];


self.webView.scrollView.hidden = YES;
self.webView.backgroundColor = [UIColor grayColor];

// 加载网页
NSURL *url = [NSURL URLWithString:@"http://www.xianhua.cn/m/"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

    UIActivityIndicatorView *showView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    [showView startAnimating];
self.showView = showView;
    showView.center = self.view.center;
    [self.webView addSubview:showView];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView{
// 删除
NSString *str = @"document.getElementsByClassName('detail_btns2')[0].remove();";
    [webView stringByEvaluatingJavaScriptFromString:str];

// 改变头部
NSString *str1 = @"document.getElementsByTagName('h1')[0].innerText = '大神5期鲜花网';";
    [webView stringByEvaluatingJavaScriptFromString:str1];

// 改变底部
NSString *str2 = @"document.getElementById('xiazaiapp').getElementsByTagName('a')[0].innerText = '下载大神5期app';";
    [webView stringByEvaluatingJavaScriptFromString:str2];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.showView stopAnimating];
self.webView.scrollView.hidden = NO;
    });
}

@end

七、JS调用OC代码

ViewController.m

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate,UINavigationControllerDelegate,UIImagePickerControllerDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

}


#pragma - UIWebViewDelegate
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
// NSLog(@"%@", request.URL.absoluteString);
NSString *str = request.URL.absoluteString;
NSRange range = [str rangeOfString:@"ds5q:///"];
    NSUInteger location = range.location;
if (location != NSNotFound) {
NSString *str2 = [str substringFromIndex:location + range.length];
        SEL sel = NSSelectorFromString(str2);
        [self performSelector:sel];
    }

return YES;
}

// 访问相册
- (void)openCamera{
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    [self presentViewController:picker animated:YES completion:nil];
}

@end

test.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin-top: 100px;
}
</style>
</head>
<body>
<button onclick="openCamera();">访问相册</button>

<script type="text/javascript">
function openCamera(){
 window.location.href = 'ds5q:///openCamera';
 }
</script>
</body>
</html>

秒客网

HTML5之JavaScript简介（二）

相关文章