一,效果图。

IndexedDB是生龙活虎种能够令你在顾客的浏览器内持久化存款和储蓄数据的法子,为web应用提供了增加的查询成效,使大家的利用在在线和离线都能健康干活。

<div class="content">
            <button class="left">left</button>
            <button class="right">right</button>
            <div class="index"></div>
            <div class="lists">
                <!--&lt;!&ndash;width: item的数量÷3乘以100%&ndash;&gt;-->
                <div class="box">
                    <!--width: 1÷item的数量乘以100%-->
                    <div class="item">
                        <img src="a.png" alt="a">
                        <p>aaa</p>
                    </div>
                    <div class="item active">
                        <img src="b.png" alt="b">
                        <p>bbb</p>
                    </div>
                    <div class="item">
                        <img src="c.png" alt="c">
                        <p>ccc</p>
                    </div>
                    <div class="item">
                        <img src="d.png" alt="d">
                        <p>ddd</p>
                    </div>
                    <div class="item">
                        <img src="e.png" alt="e">
                        <p>eee</p>
                    </div>
                    <div class="item">
                        <img src="f.png" alt="f">
                        <p>ffff</p>
                    </div>
                </div>
            </div>
        </div>

      <script>
            $(function(){
//                循环数据 假设有个数组,有10条数据
//                 var arr = [1,2,3,4,5,6,7,8,9,10];
//                 var arr_len = arr.length;
//                 var box = '<div class="box" style="width: '+arr_len/3*100+'%;"></div>';
//                 $('.lists').append(box);
//                 for (var i = 0; i < arr_len;i++){
//                     var newDiv = document.createElement('div');
//                     newDiv.innerHTML = '<img src=""/>'+
//                         '<p>' +
//                         (i+1)+
//                         '</p>';
//                     newDiv.className = 'item '+(i==1?'active':'');
//                     newDiv.style = 'width: '+1/arr_len*100+'%;';
//                     newDiv.onclick =  (function(ind) {
//                         return function () {
//                             index = ind-1;
//                             console.log(ind)
//                             $(".box").animate({left: -index*100/3+"%"})
//                             $(".item").removeClass('active')
//                             $($(".item")[index+1]).addClass('active');
//                             $('.index').text(index+2)
//                         }
//                     })(i) ;
//                     $('.box').append(newDiv);
//                 }

                var arr_len = $('.item').length;

                $('.box').css({width: arr_len/3*100+'%'})
                $('.item').css({width: 1/arr_len*100+'%'})


                $('.item').on('click',function (e) {
                    var _this = $(e.target);
                    if (!_this.hasClass('item')){
                        _this = _this.parents('.item');
                    }
                    index = _this.index('.item')-1;
                    $(".box").animate({left: -index*100/3+"%"})
                    $(".item").removeClass('active')
                    $($(".item")[index+1]).addClass('active');
                    $('.index').text(index+2)
                })

                var index = 0;
                var len = arr_len;
                var temp = true;
                var pageX,pageY;
                $('.content').on('touchstart',function (e) {
                    var touches = e.originalEvent.targetTouches[0];
                    pageX = touches.pageX;
                    pageY = touches.pageY;
                }).on('touchmove',function (e) {
                    var touches = e.originalEvent.targetTouches[0];
                    if (pageX>touches.pageX+20){
                        left()
                    }else if (pageX<touches.pageX-20){
                        right()
                    }
                })
                $(".left").on('click',left)
                $(".right").on('click',right)
                function left() {
                    console.log(index,temp,'left')
                    if (index < len-2&&temp){
                        index++;
                        move(index)
                    }
                }
                function right() {
                    if (index > 0&&temp){
                        index--;
                        move(index)
                    }
                }
                function move(index) {
                    if (temp){
                        temp = false;
                        var left = $(".box").offset().left;
                        $(".box").animate({left: -index*100/3+"%"},function () {
                            temp = true;
                        })
                        $(".item").removeClass('active')
                        $($(".item")[index+1]).addClass('active');
                        $('.index').text(index+2)
                    }

                }

            })

      .lists {
                position: relative;
                height: 100px;
                overflow: hidden;
            }
            .box {
                position: absolute;
            }
            .item {
                float: left;
                background: #008000;
                height: 100px;
            }
            .item img {
                width: 20px;
                display: block;
                margin: 0 auto;
            }
            .item p {
                text-align: center;
            }
            .item.active {
                background: #0000FF;
                font-size: 30px;
            }
            .item.active img {
                width: 40px;
            }
            .item.active p {
                font-size: 30px;
            }

图片 1

出于 IndexedDB 自己的业内还在不停演进中,当前的 IndexedDB
的落到实处依旧选择浏览器前缀。在标准尤其安定以前,浏览器商家对苏降雨式
IndexedDB API
只怕都会有区别的贯彻。可是借使咱们对标准达成共鸣的话,厂商就能够不带前缀标识地实行落实。实际上部分兑现已经移除了浏览器前缀:IE
10,Firefox 16 和 Chrome 24。

 

 

固然您愿目的在于依然采纳前缀的浏览器中测量试验你的代码, 能够应用下列代码:

图片 2

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

 

要留意的是应用前缀的落到实处大概会不符合规律,大概是完结的并破损,也可能依据的照旧旧版的正规。因而不提议在生育情形中利用。大家更赞成于心中有数的不帮助某风流倜傥浏览器,并不是声称援助可是其实运转中却出难点:

二,代码。

function hasIndexedDB () {
   if (!window.indexedDB) {
      return true;
   }
}

 

开发数据库:

图片 3

// 打开我们的数据库
var request = window.indexedDB.open("MyTestDatabase");
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html 图像</title>
</head>

<body>
    <!--插入图像-->
    <p>
        An image:<img sr="smiley.gif" alt="smiley face" with="32" height="32">
    </p>
    <p>A moving image:<img src="hackanm.gif" alt="computer man" with="48" height="48">
    </p>
    <p>note that the syntax of inserting a moving image is no different from a non-moving image.
    </p>
    <!--从不同的位置插入图片-->
    <p>An image from another folder:</p>
    <img src="/images/chrome.gif" alt="Google chrome" width="33" height="32">
    <p>An image frome W3Schools:</p>
    <img src="http://www.w3cschool.cc/images/w3cschool.png" alt="W3CSchool.cc" width="336" height="69">
    <!--排列图片-->
    <h4>Image with default alignment(align="bottom"):</h4>
    <p>this is some text,<img src="smiley.gif" alt="smiley face" width="32" heigth="32">this is some text.</p>
    <h4>image with align="middle":</h4>
    <p>this is some text,<img src="smiley.gif" alt="smiley face" align="middle" with="32" height="32">this is some text</p>
    <h4>image with align="top":</h4>
    <p>this is some text.<img src="smiley.gif" alt="smiley face" align="top" width="32">this is some text.</p>
    <p><b>Note:</b> the align attribute is deprecated in html4,and is not supported html5.Use CSS instead.</p>
    <!--浮动头像-->
    <p>
        <img src="smiley.gif" alt="simly face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
    </p>
    <p>
        <img src="simley.gif" alt="smiley face" style="float:right" width="32" height="32">A paragraph with an image. The image will float to the right of this text.
    </p>
    <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>
    <!--设置图像链接-->
    <p>创建图片链接:
        <a href="http://www.runoob.com/html/html-tutorial.html">
            <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
    </p>
    <p>无边框的图片链接:
        <a href="http://www.runoob.com/html/html-tutorial.html">
            <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
    </p>
    <!--设置图像映射-->
    <p>点击太阳或其他行星,注意变化:</p>
    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
        <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    </map>
</body>

</html>

indexedDB张开数据库的法子如上,必需开展request,indexedDB唯有叁个open方法,下边包车型地铁代码表示展开了八个”MyTestDatabase”的数据库,该方式可以担负第二个参数:

图片 4

// 打开我们的数据库,版本号为1
var request = window.indexedDB.open("MyTestDatabase", 1);

 

其次个参数的版本号为整数,当前开采的版本号不可能比现成的本子号小,不然会报错。

参谋资料:《生手教程》

大概具备咱们发出的乞请大家在处理的时候首先要做的就是拉长成功和退步管理函数:

var db;
request.onerror = function(event) {
  // Do something with request.errorCode!
};
request.onsuccess = function(event) {
  db = event.target.result;
  // Do something with request.result!
};

request还应该有二个回掉方法:

request.onupgradeneeded = function(event) {
  var _db = event.target.result;
  // Do something with request.result!
};

onupgradeneeded方法是唯有在版本号进级的场馆下才会实行(假使当前版本号为1,当我们在开荒open(storeName,
2)时,onupgradeneeded就能够试行)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注