锋利的JQuery实例-用JQuery打造个性网站-首页

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!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 runat="server">
    <title>Jane Shopping</title>
    <link type="text/css" href="Styles/base.css" rel="Stylesheet" />
    <link type="text/css" href="Styles/header.css" rel="Stylesheet" />
    <link type="text/css" href="Styles/nav.css" rel="Stylesheet" />
    <link type="text/css" href="Styles/content.css" rel="Stylesheet" />
    <link type="text/css" href="Styles/skin/skin_0.css" rel="Stylesheet"  id="cssfile"/>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            //换肤效果
            var $li = $("#skin li");
            $li.click(function () {
                switchSkin(this.id);
            });

            var cookie_skin = $.cookie("MyCssSkin");
            if (cookie_skin) {
                switchSkin(cookie_skin);
            }

            //导航效果
            $("#navigation ul li:has(ul)").hover(function () {
                $(this).children("ul").stop(true, true).slideDown(400);
            }, function () {
                $(this).children("ul").stop(true, true).slideUp("fast");
            });

            //左侧模块展开与关闭
            $(".module_up_down").toggle(function () {
                $(this).prev().slideUp(600);
                $(this).children("img").attr("src", "images/up.gif");
            }, function () {
                $(this).prev().slideDown(600);
                $(this).children("img").attr("src", "images/down.gif");
            });

            //左侧最新动态模块内容滚动
            $this = $(".scrollNews");
            var scollTime;
            $this.hover(function () {
                clearInterval(scollTime);
            }, function () {
                scollTime = setInterval(function () {
                    scollNews($this);
                }, 3000);
            }).trigger("mouseleave");

            //左侧最新动态模块内容添加超链接提示
            var x = 10;
            var y = 20;
            var myTitle;
            $(".tooltip").mouseover(function (event) {
                myTitle = this.title;
                this.title = "";
                var newTip = '<div id="tooltip">' + myTitle + '</div>';
                $("body").append(newTip);
                $("#tooltip").css({ left: event.pageX + x, top: event.pageY + y }).show("fast");
            }).mouseout(function () {
                this.title = myTitle;
                $("#tooltip").remove();
            });

            //左侧最新产品分类树
            $(".m-expanded > span").toggle(function () {
                $(this).next("ul").slideUp(400);
                $(this).parent().attr("class", "m-collapsed");
            }, function () {
                $(this).next("ul").slideDown(400);
                $(this).parent().attr("class", "m-expanded");
            });

            //右侧上部产品广告效果
            var adLen = $(".num > li").length;
            var index = 0;
            var adTimer;
            $(".num li").mouseover(function () {
                index = $(".num li").index(this);
                showImg(index);
            }).eq(0).mouseover();

            $('.ad').hover(function () {
                clearInterval(adTimer);
            }, function () {
                adTimer = setInterval(function () {
                    showImg(index)
                    index++;
                    if (index == adLen) { index = 0; }
                }, 3000);
            }).trigger("mouseleave");

            //右侧下半部分列表横向滚动效果图
            var page = 1;
            var i = 4; //每页显示4张图片
            var len = $(".prolist_content ul li").length;
            var pagecount = Math.ceil(len / i);
            var width = $('.prolist').width();
            $(".goRight").click(function () {
                if (!$(".prolist_content").is(".animated")) {
                    if (page == pagecount) {
                        $(".prolist_content").animate({ left: 0 }, 800);
                        page = 1;
                    } else {
                        $(".prolist_content").animate({ left: "-=" + width + "px" }, 800);
                        page++;
                    }
                }
            });

            $(".goLeft").click(function () {
                if (!$(".prolist_content").is(":animated")) {
                    if (page == 1) {
                        $(".prolist_content").animate({ left: '-=' + (pagecount - 1) * width }, 800);
                        page = pagecount;
                    } else {
                        $(".prolist_content").animate({ left: '+=' + width }, 800);
                        page--;
                    }
                }
            });

            //右侧下部光标滑过产品列表的效果
            $(".content_right .prolist ul li").each(function () {
                var position = $(this).position();
                var li_left = position.left;
                var li_top = position.top;
                var img_width = $(this).find("img").width();
                var img_height = $(this).find("img").height();
                 var spanHtml = '<span style="position: absolute; top: '+li_top+'px; left: '+li_left+'px; width:'+img_width+'px; height: '+img_height+'px; cursor: pointer;" class="imageMask"></span>';
                $(spanHtml).hover(function () {
                    $(this).addClass("imageOver");
                }, function () {
                    $(this).removeClass("imageOver");
                }).appendTo($(this).find("a"));
            });
        });

        /*网页换肤效果*/
        function switchSkin(skinName) {
            $("#" + skinName).addClass("selected")
                        .siblings().removeClass("selected");
            $("#cssfile").attr("href", "Styles/skin/" + skinName + ".css");

            $.cookie("MyCssSkin", skinName, { path: '/', expires: 10 });
        }

        //滚动新闻
        function scollNews(obj) {
            var $self = obj.find("ul:first");
            var lineHeight = $self.find("li:first").height();
            $self.animate({ "margin-top": - lineHeight + "px" }, 600, function () {
                $self.css("margin-top", 0).find("li:first").appendTo($self);
            });
        }
        //显示图片
        function showImg(index) {
            var adheight = $(".content_right .ad").height();
            $(".slider").stop(true, false).animate({ "top": -adheight * index }, 1500);
            $(".num li").removeClass("on")
                .eq(index).addClass("on");

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">
        <a id="logo" href="#">Jane Shopping</a>
        <ul id="skin">
            <li id="skin_0" title="蓝色" class="selected">蓝色</li>
            <li id="skin_1" title="紫色">紫色</li>
            <li id="skin_2" title="红色">红色</li>
            <li id="skin_3" title="天蓝色">天蓝色</li>
            <li id="skin_4" title="橙色">橙色</li>
            <li id="skin_5" title="淡绿色">淡绿色</li>
        </ul>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">衬衫</a>
                <ul>
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">无袖衬衫</a></li>
                </ul>
            </li>
            <li><a href="#">卫衣</a>
                <ul>
                    <li><a href="#">开襟卫衣</a></li>
                    <li><a href="#">套头卫衣</a></li>
                </ul>
            </li>
            <li><a href="#">裤子</a>
                <ul>
                    <li><a href="#">休闲裤</a></li>
                    <li><a href="#">卡其裤</a></li>
                    <li><a href="#">牛仔裤</a></li>
                    <li><a href="#">短裤</a></li>
                </ul>
            </li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div id="content">
        <div class="content_left">
            <div class="global_module news">
                <h3>
                    最新动态</h3>
                <div class="scrollNews">
                    <ul>
                        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                        <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                        <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                        <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                    </ul>
                </div>
                <p class="module_up_down">
                    <img src="images/down.gif" alt="" /></p>
            </div>
            <div class="global_module procatalog">
                <h3>
                    产品分类</h3>
                <ul class="m-treeview">
                    <li class="m-expanded"><span>衬衫</span>
                        <ul>
                            <li><span>短袖衬衫</span></li>
                            <li><span>长袖衬衫</span></li>
                        </ul>
                    </li>
                    <li class="m-expanded"><span>卫衣</span>
                        <ul>
                            <li><span>开襟卫衣</span></li>
                            <li><span>套头卫衣</span></li>
                        </ul>
                    </li>
                    <li class="m-expanded"><span>裤子</span>
                        <ul>
                            <li><span>休闲裤</span></li>
                            <li><span>免烫卡其裤</span></li>
                            <li><span>牛仔裤</span></li>
                            <li><span>短裤</span></li>
                        </ul>
                    </li>
                </ul>
                <p class="module_up_down">
                    <img src="images/down.gif" alt="" /></p>
            </div>
        </div>
        <div class="content_right">
            <div class="ad">
                <ul class="slider">
                    <li>
                        <img src="images/ads/1.gif" /></li>
                    <li>
                        <img src="images/ads/2.gif" /></li>
                    <li>
                        <img src="images/ads/3.gif" /></li>
                    <li>
                        <img src="images/ads/4.gif" /></li>
                    <li>
                        <img src="images/ads/5.gif" /></li>
                </ul>
                <ul class="num">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
            <div class="global_module prolist">
                <h3>
                    新款上市</h3>
                <div class="prolist_content">
                    <ul>
                        <li><a href="details.aspx">
                            <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li><a href="details.aspx">
                            <img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                    </ul>
                </div>
                <p class="module_left_right">
                    <img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif"
                        alt="" /></p>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

 

你可能感兴趣的:(JavaScript,jquery,css,XHTML,UP)