求一个jQuery功能！

baibai610 2012-12-14 02:58:53

功能是点右边的小图，左边的详细切换到对应的内容，同时小图和详细内容都要有滚动条。
...全文
210 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
铜臂阿铁木 2012-12-21
  • 打赏
  • 举报
 回复
引用 4 楼 baibai610 的回复:
引用 3 楼 sunzongbao2007 的回复:小图用服务器生成Thumbnail吧 图片和内容总条数不多，没必要用数据库，写成静态的就可以。
这不是数据库
youlixishia 2012-12-16
  • 打赏
  • 举报
 回复
直接加载第一条不就好了嘛？
baibai610 2012-12-15
  • 打赏
  • 举报
 回复
引用 6 楼 youlixishia 的回复:
demo中的素材请自己补充完整，并且放在与.html文件同级目录下 1(1).jpg 1(2).jpg 1(3).jpg jquery-1.4.1.js XML/HTML code ? 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484……
请教你这个如果要在详细区域默认第一条信息要怎么弄？
youlixishia 2012-12-15
  • 打赏
  • 举报
 回复
demo中的素材请自己补充完整，并且放在与.html文件同级目录下 1(1).jpg 1(2).jpg 1(3).jpg jquery-1.4.1.js 
<!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></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var full_text_1 = "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "那天的日记天飘着雨<br />" +
                        "我躲进眼泪你在那里<br />" +
                        "夕阳和海面依然清晰<br />" +
                        "还是在这里我丢了你<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有些爱不怕时间太漫长<br />" +
                        "已经生长在心里<br />" +
                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底";

        var full_text_2 = "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "那天的日记天飘着雨<br />" +
                        "我躲进眼泪你在那里<br />" +
                        "夕阳和海面依然清晰<br />" +
                        "还是在这里我丢了你<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有些爱不怕时间太漫长<br />" +
                        "已经生长在心里<br />" +
                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底";

        var full_text_3 = "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "那天的日记天飘着雨<br />" +
                        "我躲进眼泪你在那里<br />" +
                        "夕阳和海面依然清晰<br />" +
                        "还是在这里我丢了你<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有些爱不怕时间太漫长<br />" +
                        "已经生长在心里<br />" +
                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +

                        "我把对你的思念写在海角上<br />" +
                        "寄给那年七号的雨季<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底<br />" +
                        "有一些等待不能太漫长<br />" +
                        "已经枯萎在心底";

        $(document).ready(function () {
            var full_img_1 = "1(1).jpg";
            var full_img_2 = "1(2).jpg";
            var full_img_3 = "1(3).jpg";

            $(".template-title").unbind().bind("click", function () {
                $("#img-full").show();
                var rid = $(this).attr("rid");
                switch (rid) {
                    case "1":
                        $("#img-full").attr("src", full_img_1);
                        var text = $(this).children(".div-text").html();
                        $("#div-full-content").html("<h1>" + text + "</h1>" + full_text_1);
                        break;
                    case "2":
                        $("#img-full").attr("src", full_img_2);
                        var text = $(this).children(".div-text").html();
                        $("#div-full-content").html("<h1>" + text + "</h1>" + full_text_2);
                        break;
                    case "3":
                        $("#img-full").attr("src", full_img_3);
                        var text = $(this).children(".div-text").html();
                        $("#div-full-content").html("<h1>" + text + "</h1>" + full_text_3);
                        break;
                    default:
                        return;
                }
            });
        });
    </script>
    <style type="text/css">
        #mainContent
        {width:80%; margin-left:10%;}
        #left-full-content
        { width:70%; float:left; overflow:scroll; height:600px;}
        #right-Thumbnail-content
        { width:30%; float:left; overflow:scroll;}
        .template-title
        {border:1px solid green; cursor:pointer;}
        .div-img,#div-full-img
        {text-align:center; margin-right: 0px; border:1px solid #eee; margin:5px;}
        .div-text
        {border:1px solid #eef; margin:5px;}
        #div-full-content
        {border:1px solid #eef; margin:5px;width:100%; text-align:center;}
    </style>
</head>
<body>
    <div id="mainContent" >
        <div id="left-full-content">
            <div id="div-full-img">
                <img id="img-full" src="#" width="300px" style="display:none;" height="500px" />
            </div>
            <div id="div-full-content">
                
            </div>
        </div>
        <div id="right-Thumbnail-content">
            <div class="template-title" rid="1">
                <div class="div-img">
                    <img src="1(1).jpg" width="100px" height="100px" />
                </div>
                <div class="div-text" style="text-align:center;">
                    寄给那年七号的雨季,有一些等待不能太漫长
                </div>
            </div>
            <br />
             <div class="template-title" rid="2">
                <div class="div-img">
                    <img src="1(2).jpg" width="100px" height="100px" />
                </div>
                <div class="div-text" style="text-align:center;">
                    你是我天边 最美的云彩,让我用心把你留下来（留下来
                </div>
            </div>
            <br />
             <div class="template-title" rid="3">
                <div class="div-img">
                    <img src="1(3).jpg" width="100px" height="100px" />
                </div>
                <div class="div-text" style="text-align:center;">
                    过完整个夏天 忧伤并没有好一些
                </div>
            </div>
            <br />
        </div>
    </div>
</body>
</html>
baibai610 2012-12-15
  • 打赏
  • 举报
 回复
没人有这种DOME吗？
baibai610 2012-12-14
  • 打赏
  • 举报
 回复
引用 3 楼 sunzongbao2007 的回复:
小图用服务器生成Thumbnail吧
图片和内容总条数不多，没必要用数据库，写成静态的就可以。
铜臂阿铁木 2012-12-14
  • 打赏
  • 举报
 回复
小图用服务器生成Thumbnail吧
baibai610 2012-12-14
  • 打赏
  • 举报
 回复
引用 1 楼 bdmh 的回复:
其实div就可以满足你了包括滚动条，你点击时只是设置div的html内容就行了，至于这种样式，可能需要你自己加工了，或者用第三方的
我对JS也不是非常熟悉，现在的问题是如果左边没有滚动条，我已经做好了，但左边一加滚动条，右边的滚动条也没作用了，好像是有冲突，没找到原因。所以想要个DOME看看。
bdmh 2012-12-14
  • 打赏
  • 举报
 回复
其实div就可以满足你了包括滚动条，你点击时只是设置div的html内容就行了，至于这种样式，可能需要你自己加工了，或者用第三方的
jQuery技术内幕 深入解析jQuery架构设计与实现原理
《jquery技术内幕：深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写，从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理，旨在帮助读者参透jquery中的实现技巧和技术精髓，同时本书也对广大开发者如何通过阅读源代码来提升编码能力和软件架构能力提供了指导。 　　《jquery技术内幕：深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系，让大家对jquery的工作原理有大致的印象；进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部构造过程；接着详细分析了底层支持模块的源码实现，包括：选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support；最后详细分析了功能模块的源码实现，包括：属性操作attributes、事件系统events、dom遍历traversing、dom操作manipulation、样式操作css、异步请求ajax、动画effects。 　　《jquery技术内幕：深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式，先概述功能、用法、结构和实现原理，然后介绍关键步骤和分析源码实现。让读者不仅知其然，而且知其所以然。事实上，本书的根本价值在于传达一种通过阅读源码快速成长的方式。无论是前端新人，还是经验丰富的老手，只要是对javascript感兴趣的开发人员，都会从本书中受益。
精心为jQuery初学者整理的106个实例代码集
精心为jQuery初学者整理的106个实例代码集，包括了各种功能的使用，非常适合初学者
jquery版小型婚礼（可动态添加祝福语）程序文件
1：场景一主要有两个功能，第一个是控制左边图片，第二个是让右边文字逐一显示。 2：场景二功能简单一点，只控制左边人物出现，紧接着是文字显示。 3：场景三功能控制图片弹跳显示，我用for循环控制弹跳距离。 4：场景四控制图片从顶部往下滑落，停留1秒然后滑向右侧直至消失。 5：场景五慢慢显现，可点击进入婚礼。 6：场景六显现停留1.6秒，然后以碎片的形式向外散开。 7：场景七祝福贴纸随机排布，并且可拖动祝福贴纸。 8：添加祝福语中，需填写祝福语，否则不让提交。可提交的祝福语便随机散布在祝福墙中，可实现随意拖动功能，
jquery上传图片预览插件
jquery上传图片前的预览功能，兼容 ie(6/7/8/9) 火狐... ie9 默认不显示图像预览，内附设置说明图片,和参考文档 jquery.uploadPreview.js 插件
jquery autocomplete官方版(源代码+示例)
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章