仿京东的slide

吐舌头帮同学写的,欢迎交流


1、纯js+html(直接在后台生成html标记)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <title>tab demo</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
        }

        .top {
            width: 550px;
            margin: 0 auto;
        }

        .top-wrap {
            position: relative;
            border-bottom: 1px solid #666;
            height: auto;
        }

        .top-title {
            float: left;
            margin-top: 10px;
            width: 110px;
            text-align: center;
            border-bottom: 2px solid #AAA;
        }

            .top-title .smt {
                cursor: default;
                margin-bottom: 10px;
            }

        .tab-arrow {
            position: absolute;
            z-index: 1;
            top: 42px;
            left: 0;
            background-color: #E4393C;
            width: 110px;
            height: 2px;
            text-align: center;
        }

        html.lt-ie8 .tab-arrow {
             top: 41px;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .tab-arrow {
                top: 43px;
            }
        }

        .plist {
            width: 550px;
            position: absolute;
            left: 0px;
        }

            .plist .list-wrap {
                width: 110px;
                float: left;
                margin-top: 10px;
            }

                .plist .list-wrap .img-wrap {
                    width: 100px;
                    height: 100px;
                }

                .plist .list-wrap .font {
                    text-align: center;
                    font-size: small;
                    margin-top: 30px;
                    height: 30px;
                }

                .plist .list-wrap .price {
                    color: Red;
                    padding: 5px;
                }

        .top-title .active {
            color: #E4393C;
        }

        div.tab-arrow b {
            border-style: dashed dashed solid;
            border-color: transparent transparent #E4393C;
            border-width: 8px;
            width: 0;
            height: 0;
            display: inline-block;
            overflow: hidden;
            z-index: 2;
            position: absolute;
            top: -16px;
            left:51px;
        }

        #loding {
            position: absolute;
            left: 220px;
            top: 210px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top-wrap">
            <div id="loding" style="display: none">
                <img src="/Images/loading.gif" alt="加载中......" />
            </div>
            <div class="tab-arrow"><b></b></div>
            <div class="top-title">
                <div class="smt active" data-index="0">
                    <h3>特价商品</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="1">
                    <h3>大家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="2">
                    <h3>小家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="3">
                    <h3>手机通讯</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="4">
                    <h3>汽车五金</h3>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
    <!--jquery animate特效-->
    <script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
    <!--图片懒加载-->
    <script type="text/javascript">
        $(function () {
            var loaded = []; //记录记载过的goods
            $.ajax({
                type: 'post',
                url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
                data: "{'index':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    $('#loding').show();
                },
                xhrFields: {
                    onprogress: function (e) {//html5标准
                        if (e.lengthComputable) {
                            console.log("Loaded " + Number((e.loaded / e.total * 100)) + "%");
                        }
                        else {
                            console.log("Length not computable.");
                        }
                    }
                },
                success: function (data) {
                    $('#loding').hide();
                    var data = data.d;
                    if (data != null) {
                        $('div.active').after(data);
                        $("img.lazy").lazyload({ effect: "fadeIn" });

                        loaded.push(0);
                        var oldtabindex = 0;
                        var newtabindex = 0;
                        var $tabarrow = $('div.tab-arrow');
                        var delay;
                        var isdelayed = false;
                        $(".smt").bind('mouseenter', function () {
                            var $this = $(this);
                            delay = setTimeout(function () {
                                newtabindex = parseInt($this.attr("data-index"));
                                if (oldtabindex != newtabindex) {
                                    var $to = $('.top-title').eq(oldtabindex); //top-titleold
                                    var $po = $to.children('.plist'); //plistold
                                    var $tn = $(".top-title").eq(newtabindex);  //old-titleold
                                    var $pn = $tn.children('.plist'); //plistnew
                                    var flag = true;
                                    for (var k = 0; k < loaded.length; k++) {
                                        if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
                                            flag = false;
                                            break;
                                        }
                                    }
                                    if (flag) {
                                        $.ajax({
                                            type: 'post',
                                            url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
                                            data: "{'index':'" + newtabindex + "'}",
                                            contentType: "application/json; charset=utf-8",
                                            dataType: "json",
                                            beforeSend: function () {
                                                $('#loding').show();
                                            },
                                            success: function (data) {
                                                $('#loding').hide();
                                                var data = data.d;
                                                if (data != null) {
                                                    $to.children('.smt').removeClass('active');
                                                    $po.hide();
                                                    $this.after(data);
                                                    $this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
                                                    $tn.children('.smt').addClass('active');
                                                    $pn.show();
                                                    loaded.push(newtabindex);
                                                    $tabarrow.stop();
                                                    $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                                                }
                                            }
                                        })
                                    } else {
                                        $to.children('.smt').removeClass('active');
                                        $po.hide();
                                        $tn.children('.smt').addClass('active');
                                        $pn.show();
                                        $tabarrow.stop();
                                        $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                                    }
                                    isdelayed = true;
                                }
                            }, 200);
                        }).bind('mouseleave', function () {
                            clearTimeout(delay);
                            if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
                            isdelayed = false;
                        });
                    }
                }
            })
        })
    </script>
</body>
</html>

webservice:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;

namespace Demo
{
    /// <summary>
    /// GoodsWebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
     [System.Web.Script.Services.ScriptService]
    public class GoodsWebService : System.Web.Services.WebService
    {

        private GoodsEntities db=null;
        public GoodsWebService()
        {
            db = new GoodsEntities();
        }

        [WebMethod(CacheDuration=1800)] //缓存30分钟(30*60)
        public string GetGoodsListByCategory(int index)
        {
            var s = db.tGoods.OrderBy(n => n.Id).Skip(index * 10).Take(10);
            if (s.Count() != 0)
            {
                StringBuilder  goods = new StringBuilder();                                 
                foreach (tGoods g in s) {
                    goods.Append(string.Format("<div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/{0}\"/></div><div class=\"font\">{1}</div><div class=\"price\">{2}</div></div>", g.fImageUrl, g.fGoodsName, g.fPrice));
                }
                return  "<div class=\"plist\">" + goods.ToString() + "</div>";
            }
            else
            {
                return "未找到数据!";
            }
        }


        [WebMethod(CacheDuration = 1800)] //缓存30分钟(30*60)
        public List<tGoods> GetGoodsListByCategory1(int index)
        {
            var s = db.tGoods.OrderBy(n => n.Id).Skip(index * 10).Take(10);
            if (s.Count() != 0)
            {
                return s.ToList();
            }
            else
            {
                return null;
            }
        }
    }
}

2、纯js+html(ajax请求service返回数据通过jquery template拼接)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>tab demo</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
        }

        .top {
            width: 550px;
            margin: 0 auto;
        }

        .top-wrap {
            position: relative;
            border-bottom: 1px solid #666;
            height: auto;
        }

        .top-title {
            float: left;
            margin-top: 10px;
            width: 110px;
            text-align: center;
            border-bottom: 2px solid #AAA;
        }

            .top-title .smt {
                cursor: default;
                margin-bottom: 10px;
            }

        .tab-arrow {
            position: absolute;
            z-index: 1;
            top: 43px;
            left: 0;
            background-color: #E4393C;
            width: 110px;
            height: 2px;
            text-align: center;
        }

        .plist {
            width: 550px;
            position: absolute;
            left: 0px;
        }

            .plist .list-wrap {
                width: 110px;
                float: left;
                margin-top: 10px;
            }

                .plist .list-wrap .img-wrap {
                    width: 100px;
                    height: 100px;
                }

                .plist .list-wrap .font {
                    text-align: center;
                    font-size: small;
                    margin-top: 30px;
                    height: 30px;
                }

                .plist .list-wrap .price {
                    color: Red;
                    padding: 5px;
                }

        .top-title .active {
            color: #E4393C;
        }

        div.tab-arrow b {
            border-style: dashed dashed solid;
            border-color: transparent transparent #E4393C;
            border-width: 10px;
            width: 0;
            height: 0;
            display: inline-block;
            margin-top: -20px;
            overflow: hidden;
            z-index: 2;
        }

        #loding {
            position: absolute;
            left: 220px;
            top: 210px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top-wrap">
            <div id="loding" style="display: none">
                <img src="/Images/loading.gif" alt="加载中......" />
            </div>
            <div class="tab-arrow" style="left: 0px;"><b></b></div>
            <div class="top-title">
                <div class="smt active" data-index="0">
                    <h3>特价商品</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="1">
                    <h3>大家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="2">
                    <h3>小家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="3">
                    <h3>手机通讯</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="4">
                    <h3>汽车五金</h3>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <!--jquery animate特效-->
    <script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
    <!--jquery animate特效-->
    <!--图片懒加载-->
    <script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
    <!--图片懒加载-->
    <script type="text/javascript" src="Scripts/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var loaded = []; //记录记载过的goods
            $.ajax({
                type: 'post',
                url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory1",
                data: "{'index':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    $('#loding').show();
                },
                success: function (data) {
                    $('#loding').hide();
                    var data = data.d;
                    if (data != null) {
                        $plist = $("<div class='plist'></div>");
                        $("<div><div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/${fImageUrl}\"/></div><div class=\"font\">${fGoodsName}</div><div class=\"price\">${fPrice}</div></div></div>")
                         .tmpl(data).appendTo($plist);
                        $('div.active').after($plist);
                        $("img.lazy").lazyload({ effect: "fadeIn" });

                        loaded.push(0);
                        var oldtabindex = 0;
                        var newtabindex = 0;
                        var $tabarrow = $('div.tab-arrow');
                        var delay;
                        var isdelayed = false;
                        $(".smt").bind('mouseenter', function () {
                            var $this = $(this);
                            delay = setTimeout(function () {
                                newtabindex = parseInt($this.attr("data-index"));
                                if (oldtabindex != newtabindex) {
                                    var $to = $('.top-title').eq(oldtabindex); //top-titleold
                                    var $po = $to.children('.plist'); //plistold
                                    var $tn = $(".top-title").eq(newtabindex);  //old-titleold
                                    var $pn = $tn.children('.plist'); //plistnew
                                    var flag = true;
                                    for (var k = 0; k < loaded.length; k++) {
                                        if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
                                            flag = false;
                                            break;
                                        }
                                    }
                                    if (flag) {
                                        $.ajax({
                                            type: 'post',
                                            url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory1",
                                            data: "{'index':'" + newtabindex + "'}",
                                            contentType: "application/json; charset=utf-8",
                                            dataType: "json",
                                            beforeSend: function () {
                                                $('#loding').show();
                                            },
                                            success: function (data) {
                                                $('#loding').hide();
                                                var data = data.d;
                                                if (data != null) {
                                                    $plist = $("<div class='plist'></div>");
                                                    //外层需多加一个div
                                                    $("<div><div class=\"list-wrap\"><div class=\"img-wrap\"><img class=\"lazy\" data-original=\"goods/${fImageUrl}\"/></div><div class=\"font\">${fGoodsName}</div><div class=\"price\">${fPrice}</div></div></div>")
                                                     .tmpl(data).appendTo($plist);
                                                    $to.children('.smt').removeClass('active');
                                                    $po.hide();
                                                    $this.after($plist);
                                                    $this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
                                                    $tn.children('.smt').addClass('active');
                                                    $pn.show();
                                                    loaded.push(newtabindex);
                                                    $tabarrow.stop();
                                                    $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                                                }
                                            }
                                        })
                                    } else {
                                        $to.children('.smt').removeClass('active');
                                        $po.hide();
                                        $tn.children('.smt').addClass('active');
                                        $pn.show();
                                        $tabarrow.stop();
                                        $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                                    }
                                    isdelayed = true;
                                }
                            }, 200);
                        }).bind('mouseleave', function () {
                            clearTimeout(delay);
                            if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
                            isdelayed = false;
                        });
                    }
                }
            })
        })
    </script>
</body>
</html>


3、第一个slide由服务器生成,其他项通过ajax加载(直接在后台生成html标记)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Demo.Index" %>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <title>tab demo</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #666;
        }

        .top {
            width: 550px;
            margin: 0 auto;
        }

        .top-wrap {
            position: relative;
            border-bottom: 1px solid #666;
            height: auto;
        }

        .top-title {
            float: left;
            margin-top: 10px;
            width: 110px;
            text-align: center;
            border-bottom: 2px solid #AAA;
        }

            .top-title .smt {
                cursor: default;
                margin-bottom: 10px;
            }

        .tab-arrow {
            position: absolute;
            z-index: 1;
            top: 42px;
            left: 0;
            background-color: #E4393C;
            width: 110px;
            height: 2px;
            text-align: center;
        }

        html.lt-ie8 .tab-arrow {
            top: 41px;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .tab-arrow {
                top: 43px;
            }
        }

        .plist {
            width: 550px;
            position: absolute;
            left: 0px;
        }

            .plist .list-wrap {
                width: 110px;
                float: left;
                margin-top: 10px;
            }

                .plist .list-wrap .img-wrap {
                    width: 100px;
                    height: 100px;
                }

                .plist .list-wrap .font {
                    text-align: center;
                    font-size: small;
                    margin-top: 30px;
                    height: 30px;
                }

                .plist .list-wrap .price {
                    color: Red;
                    padding: 5px;
                }

        .top-title .active {
            color: #E4393C;
        }

        div.tab-arrow b {
            border-style: dashed dashed solid;
            border-color: transparent transparent #E4393C;
            border-width: 8px;
            width: 0;
            height: 0;
            display: inline-block;
            overflow: hidden;
            z-index: 2;
            position: absolute;
            top: -16px;
            left: 51px;
        }

        #loding {
            position: absolute;
            left: 220px;
            top: 210px;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="Test.aspx"></script>
    <a href="Test2.aspx?exit=1">退出此页并跳到index.html </a>
    <p>代码:<a href="Test2.aspx?exit=1"></a></p>

     <a href="Test2.aspx?exit=2">这个不跳转</a>
    <p>代码:<a href="Test2.aspx?exit=2"></a></p>
    <div class="top">
        <div class="top-wrap">
            <div id="loding" style="display: none">
                <img src="/Images/loading.gif" alt="加载中......" />
            </div>
            <div class="tab-arrow"><b></b></div>
            <div class="top-title">
                <div class="smt active" data-index="0">
                    <h3>特价商品</h3>
                </div>
                <div class="plist">
                    <%foreach (Demo.tGoods g in lg){
                          Response.Write(String.Format(@"<div class='list-wrap'> 
                          <div class='img-wrap'><img class='lazy' src='/Images/placeholder.png' data-original='goods/{0}'/></div>
                          <div class='font'>{1}</div> <div class='price'>{2}</div></div>", g.fImageUrl, g.fGoodsName, g.fPrice));
                      }%>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="1">
                    <h3>大家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="2">
                    <h3>小家电</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="3">
                    <h3>手机通讯</h3>
                </div>
            </div>
            <div class="top-title">
                <div class="smt" data-index="4">
                    <h3>汽车五金</h3>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easing.min.js"></script>
    <!--jquery animate特效-->
    <script type="text/javascript" src="Scripts/jquery.lazyload.js"></script>
    <!--图片懒加载-->
    <script type="text/javascript">
        $(function () {
            var loaded = []; //记录记载过的goods
            $('img.lazy').lazyload({ effect: "fadeIn" });
            loaded.push(0);
            var oldtabindex = 0;
            var newtabindex = 0;
            var $tabarrow = $('div.tab-arrow');
            var delay;
            var isdelayed = false;
            $(".smt").bind('mouseenter', function () {
                var $this = $(this);
                delay = setTimeout(function () {
                    newtabindex = parseInt($this.attr("data-index"));
                    if (oldtabindex != newtabindex) {
                        var $to = $('.top-title').eq(oldtabindex); //top-titleold
                        var $po = $to.children('.plist'); //plistold
                        var $tn = $(".top-title").eq(newtabindex);  //old-titleold
                        var $pn = $tn.children('.plist'); //plistnew
                        var flag = true;
                        for (var k = 0; k < loaded.length; k++) {
                            if (loaded[k] == newtabindex) { //判断对应<div class="smt" data-index="newtabindex"></div>是否加载过goods
                                flag = false;
                                break;
                            }
                        }
                        if (flag) {
                            $.ajax({
                                type: 'post',
                                url: "http://localhost:51355/GoodsWebService.asmx/GetGoodsListByCategory",
                                data: "{'index':'" + newtabindex + "'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                beforeSend: function () {
                                    $('#loding').show();
                                },
                                success: function (data) {
                                    $('#loding').hide();
                                    var data = data.d;
                                    if (data != null) {
                                        $to.children('.smt').removeClass('active');
                                        $po.hide();
                                        $this.after(data);
                                        $this.next().find('img.lazy').lazyload({ effect: "fadeIn" });
                                        $tn.children('.smt').addClass('active');
                                        $pn.show();
                                        loaded.push(newtabindex);
                                        $tabarrow.stop();
                                        $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                                    }
                                }
                            })
                        } else {
                            $to.children('.smt').removeClass('active');
                            $po.hide();
                            $tn.children('.smt').addClass('active');
                            $pn.show();
                            $tabarrow.stop();
                            $tabarrow.animate({ left: newtabindex * $tabarrow.width() }, 500, "easeInOutQuint");
                        }
                        isdelayed = true;
                    }
                }, 200);
            }).bind('mouseleave', function () {
                clearTimeout(delay);
                if (isdelayed) { oldtabindex = parseInt($(this).attr("data-index")); }
                isdelayed = false;
            });
        })
    </script>
</body>
</html>

namespace Demo
{
    public partial class Index : System.Web.UI.Page
    {
        public List<tGoods> lg = new List<tGoods>();

        private GoodsEntities db = null;
        public Index()
        {
            db = new GoodsEntities();
        }


        protected void Page_Load(object sender, EventArgs e)
        {
            var s = db.tGoods.OrderBy(n => n.Id).Take(10);
            if (s.Count() != 0){
                lg = s.ToList();
            }
            else {
                Response.End();
            }
        }
    }
}


猜你喜欢

转载自blog.csdn.net/zhuankeshumo/article/details/17152467