`
luckyjaky
  • 浏览: 114374 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

jQueryCSSJavaScriptUPXHTML 
阅读更多 
<%@ 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>

 

分享到：
| background属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery-ui-1.8.22

    《jQuery UI 1.8.22：打造精美网页的特效框架》 jQuery UI是基于JavaScript库jQuery的一个强大且易用的用户界面组件框架。它提供了丰富的交互效果、可自定义的主题以及各种实用的插件，帮助开发者快速构建功能丰富...

    jquery-mobile-theme-174943-0

    同时，也可能有各种交互组件的实例，如滑块、切换开关和弹出对话框，这些都是jQuery Mobile为了提高用户体验而设计的关键组件。 总的来说，"jquery-mobile-theme-174943-0"是jQuery Mobile框架的一个具体实现，提供...

    jquery-easyui-1.5版本

    《jQuery EasyUI 1.5版本详解：打造高效前端界面》 jQuery EasyUI 是一个基于 jQuery 的开源框架，它提供了一系列轻量级、易于使用的组件，帮助开发者快速构建功能丰富的Web应用界面。EasyUI 1.5 版本是这个框架的...

    jquery-week-calendar demo

    《jQuery Week Calendar 插件深度解析与应用实例》 在Web开发中，日历插件是一种常见的组件，尤其对于管理时间表、安排事件或者展示日期相关的数据时，它显得尤为重要。今天我们将深入探讨一个名为“jQuery Week ...

    jquery实例集合

    《jQuery实例集合——深入浅出jQuery编程》 jQuery，这个小巧而强大的JavaScript库，自2006年发布以来，已经成为了Web开发中不可或缺的一部分。它以其简洁的API、丰富的功能以及良好的浏览器兼容性，极大地简化了...

    JQuery-EasyUI技术编写的实例

    ### jQuery-EasyUI-edt 编写的实例 `jQuery-EasyUI-edt` 可能是指 EasyUI 的编辑器扩展，它可能提供了一些额外的编辑功能或者增强了原有的组件。通常，这种扩展会包括对文本编辑、代码编辑、富文本编辑等场景的支持...

    jquery-easyui-1.3.0

    4. **示例代码**：提供了各种实际应用场景的代码示例，通过实例帮助开发者理解和掌握组件的使用方式。 5. **主题与皮肤**：介绍如何定制和应用EasyUI的主题，使得应用界面符合公司的品牌风格或者用户的个性化需求。...

    jQuery-zTree树插件demo.zip

    《jQuery-zTree树插件深度解析与应用实例》 jQuery-zTree是一款广泛应用于网页开发中的JavaScript树形插件，以其高效、灵活、易用的特点深受开发者喜爱。它提供了丰富的功能，包括但不限于动态加载、节点拖放、...

    jquery mobile 实例用bootstrap 搭建响应式手机软件交谈聊天页面样式

    在移动应用开发中，创建一个适应各种屏幕尺寸的交互式聊天界面是至关重要的。本实例将结合`jQuery Mobile`和`Bootstrap`这两个强大的前端框架，教你如何...不断实践和优化，你将能打造出更加高效、个性化的聊天应用。

    jquery分页插件-内有演示说明

    **jQuery分页插件**是Web开发中常用的一种工具，用于在大量数据中实现高效的页面导航，提升用户体验。...通过深入理解这些核心知识点并结合实际项目需求，你可以打造出符合业务场景的个性化分页解决方案。

    jquery个性化网站侧边栏工具条.zip

    《jQuery个性化网站侧边栏工具条的实现与应用》 在网页设计中，侧边栏工具条作为一种常见的交互元素，可以提升用户体验，提供便捷的操作入口。"jQuery个性化网站侧边栏工具条.zip"是一个用于创建自定义侧边栏工具条...

    锋利的jQuery_高清_书签.part2

    第二部分 第1章　认识jQuery 1.1　JavaScript和JavaScript库 1.1.1 JavaScript简介 1.1.2 JavaScript库作用及对比 1.2 加入jQuery 1.2.1 jQuery简介 1.2.2 jQuery的优势 ...第8章　用jQuery打造个性网站

    前端项目-jquery.fancytree.zip

    Fancytree不仅提供基础功能，还允许开发者通过扩展和自定义事件来打造个性化的树形视图。例如，你可以定义自己的`activate`事件来处理节点激活时的操作，或者创建自定义图标和标签模板。 五、实例应用 在实际项目...

    KinSlideshow jQuery 多样式图片幻灯片插件

    KinSlideshow是一款基于jQuery库的高效且功能丰富的图片幻灯片插件，它为网站设计者和开发者提供了创建吸引人的动态图像展示的工具。这款插件以其多样的样式和灵活的配置选项而受到广泛欢迎，使得网站的图像展示更加...

    jQuery-EliteBox-Menu

    jQuery EliteBox Menu 是一个专门用于创建高效、美观且响应式的下拉菜单的插件，它基于流行的JavaScript库jQuery，结合CSS技术，为开发者提供了丰富的定制选项，以打造个性化的网站导航。 一、jQuery简介 jQuery 是...

    jQuery可定制画廊插件.zip

    《jQuery可定制画廊插件：打造个性化的视觉体验》 在网页设计中，画廊是一种常见的元素，用于展示图片或多媒体内容。jQuery作为一个轻量级的JavaScript库，以其丰富的功能和易用性深受开发者喜爱。本文将深入探讨...

    Slippry-现代时尚的jQuery响应式幻灯片插件

    **滑动展示插件Slippry：打造现代与响应式的jQuery幻灯片** 在现代网页设计中，幻灯片组件已经成为一个不可或缺的部分，用于展示动态内容，如产品图片、新闻更新或特色介绍。其中，Slippry作为一款优秀的jQuery响应...

    jQuery_EasyUI中文帮助手册_jqueryeasyui_easyui_

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架，它简化了网页用户界面的构建，提供了丰富的组件和主题，使得...通过深入阅读和实践，你将能熟练掌握jQuery EasyUI的使用，提升前端开发效率，打造高质量的Web应用。

    前端项目-jquery.gridster.zip

    《前端项目：jQuery Gridster——打造灵活的拖放多列网格布局》 在现代Web开发中，用户界面的交互性和可定制性成为了提升用户体验的关键因素。前端开发者常常需要构建复杂而富有吸引力的布局，以便更好地展示信息和...

Magicbox
Global site tag (gtag.js) - Google Analytics