asp.net里面像QQ相册那样列表然后预览的jquery特效

流年岁月 2010-11-02 09:32:08
asp.net里面像QQ相册那样列表然后预览的jquery特效
谁有这样的完整例子，高分求！谢谢！
...全文
176 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
csdsuper 2011-12-03
  • 打赏
  • 举报
 回复
我也在看有没有好的
流年岁月 2010-11-02
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 qingfeng_wu 的回复:]
预览：http://www.intelliance.fr/jquery/imagebox/
下载：http://www.qianduan.net/top-10-jquery-lightbox-scripts.html
[/Quote]
谢谢这位哥们 你提供的东西很好用 加QQ以后多多请教你 我的QQ 790212655 谢谢
段传涛 2010-11-02
  • 打赏
  • 举报
 回复
-----------------------------------把代码放到txt里然后修改后缀。
把如下代码加入<body>区域中
<script language="JavaScript">
<!--
//该函数在调用过程中只需要在将要点击的单元格内的onclick事件中调用showme函数即可
//function showme(obj1, obj2)该函数主要为使点击的对象高亮度显示，并调用moveme函数，参数obj1为母体即<div>标签的id，obj2为点击对象本身
//function moveme(obj)该函数判断单元的移动，并调用相应的函数处理，obj参数为母体
//function moveup(obj,objtop)该函数使一个单元向上移动，参数obj为母体，objtop为母体的本身最高高度
//function movedown(obj,objbuttom)该函数使一个单元向下移动，参数obj为母体，objbuttom为母体的本身最低高度

var headHeight = 22;//每个标题的高度
var bodyHeight = 160;//母体高度
var objcount = 6;//项目的个数，要改变了项目的个数别忘了该这个东西
var step = 6;//移动速度(请确认可以被'bodyHeight-headHeight'整除,当前的设定可选速度为1,2,3,6,23,138)
var moving = false;//是否有移动的项目

function showme(obj1, obj2)
{
//以下循环为改变标题的背景颜色
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags("td").length;i++)
if (document.all.tags("td")[i].className.indexOf('headtd') == 0)
document.all.tags("td")[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}

function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
//检验出每一个应该向上移动的层
countid = 1;
for(i=0;i<document.all.tags("div").length;i++)
if (document.all.tags("div")[i].id == 'item'+countid+'body')
{
obj = document.all.tags("div")[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
//检验出每一个应该向下移动的层
idnumber++;
countid = objcount;
for(i=document.all.tags("div").length-1;i>=0;i--)
if (document.all.tags("div")[i].id == 'item'+countid+'body')
{
obj = document.all.tags("div")[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}

function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}

function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
// -->
</script>
<style type="text/css">
<!--
.headtd1 { background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}
.headtd2 { background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
.bodytd { background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}
-->
</style>
<!--改改这个div（mainboard）的height，加一个项目当然要把它的值加22了，减一个项目当然就是减22了//-->
<div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:270px; z-index:3; overflow: hidden; background: #0099FF;" onclick="">
<div id="item1body" style="position:absolute; left:0; top:0; width:120px; height:160px; z-index:1; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item1head" height="20" class="headtd2" onclick="showme(item1body,this)">
<div align="center">工作室</div>
</td>
</tr>
<tr>
<td class="bodytd">

<div align="center"><a href="http://www.sohu.com">搜狐</a></div>
<div align="center"><a href="http://www.sina.com">新浪</a></div>
<div align="center"><a href="http://www.ifeng.com">凤凰</a></div>
</td>
</tr>
</table>
</div>
<div id="item2body" style="position:absolute; left:0px; top:160; width:120; height:160; z-index:2; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item2head" height="20" class="headtd1" onclick="showme(item2body,this)">
<div align="center">邮箱</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center"><a href="mailto:webmaster@k688.com">发信给我哟</a></div>
</td>
</tr>
</table>
<p class="headtd1"> </p>
</div>
<div id="item3body" style="position:absolute; left:0; top:182; width:120px; height:160; z-index:3">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item3head" height="20" class="headtd1" onclick="showme(item3body,this)">
<div align="center">Q Q</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center">37146743</div>
</td>
</tr>
</table>
</div>
<div id="item4body" style="position:absolute; left:0; top:204; width:120px; height:160; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item4head" height="20" class="headtd1" onclick="showme(item4body,this)">
<div align="center">朋友</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center">
<p>小一、旁腾

</p>
</div>
</td>
</tr>
</table>
</div>
<div id="item5body" style="position:absolute; left:0; top:226; width:120px; height:160; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item5head" height="20" class="headtd1" onclick="showme(item5body,this)">
<div align="center">陌生人</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center">
<p>小虎

AAP
小伙伴

小一</p>
</div>
</td>
</tr>
</table>
</div>
<!--如果要添加一个子项目请拷贝一份下面的代码并放于后面。干什么，不要拷贝我了，是下面的//-->
<div id="item6body" style="position:absolute; left:0; top:248; width:120px; height:160; z-index:4; overflow: hidden">
<table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
<tr>
<td id="item6head" height="20" class="headtd1" onclick="showme(item6body,this)">
<div align="center">版本号</div>
</td>
</tr>
<tr>
<td class="bodytd">
<div align="center">
<p>版本号：1.1



封锁了移动过

程中的点击事件

这样不会出现抖

动现象了。
</div>
</td>
</tr>
</table>
</div>
<!--哎哎，别往下拷贝了，到我得上面为止了，拷贝到代码放到我后面吧
哦，对了别忘了改几个id呀，div的id，td的id，还有onclick事件中的对象id
id的规则是div中item＋数字＋body。td中item＋数字＋head
还有div的style中的top值呀，是多少，上面这个div的top加上22就是了
别忘了按照body下的提示改改mainboard的height呀。还有给教本中的objcount数量改为你现在项目的个数
别傻了，快点行动吧，要不赶不上饭点了//-->
</div>
</body>
</html>
porschev 2010-11-02
  • 打赏
  • 举报
 回复
http://www.open-open.com/ajax/Image.htm
php 模糊图片背景,JavaScript_Javascript实现图片加载从模糊到清晰显示的方法，1.背景介绍 在网络相册应用中 - phpStudy...
Javascript实现图片加载从模糊到清晰显示的方法1.背景介绍在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。2.现状现在加载照片的方法主要有一下两种：(1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验...
MIPI-video-mode- and -command-mode- differences
源码链接： https://pan.quark.cn/s/0f7c75cb3aad ### MIPI Video Mode 与 Command Mode 的差异 #### 一、引言 MIPI (Mobile Industry Processor Interface) 是一种用于连接移动设备中处理器及其外围设备的标准化接口。MIPI 接口支持多种协议，其中包含 DSI (Display Serial Interface) 和 DCS (Display Control Interface) 等协议。在 MIPI 接口的应用中，主要涉及两种工作模式：Video Mode（视频模式）和 Command Mode（命令模式）。本文旨在系统性地阐述这两种模式的工作机制、特性以及实际应用环境。 #### 二、LCD RAM 概念说明 在进一步探讨 MIPI 的两种模式之前，有必要对文中提及的“LCD RAM”概念进行明确。实际上，“LCD RAM”并非一个通用术语，而是本文作者用来描述 LCD 控制器中用于存储显示数据的内存区域。LCD（Liquid Crystal Display，液晶显示屏）通常配备一个控制 IC（Integrated Circuit，集成电路），该控制 IC 可能内置 RAM 以缓存显示数据。 #### 三、MIPI Video Mode（视频模式） **定义：** - 视频模式是一种类似于传统 RGB 接口的工作模式，它要求主机持续不断地向显示器传输刷新数据。 - 在这种模式下，数据和控制信号以报文的形式通过 MIPI 总线进行传输。 - 显示器本身无需配备帧缓冲器，因为主机会周期性地刷新屏幕。 **特点：** 1. **实时性高：** 主机需要不...
CST端口离散设置-下载即用.zip
源码下载地址： https://pan.quark.cn/s/a4b39357ea24 在电磁模拟技术中，CST（Computer Simulation Technology）是一种被广泛采纳的软件工具，它主要用于电磁场、微波、天线以及射频系统的设计工作。本资料将详细分析CST软件中离散端口的具体配置方法，这些方法对于提升仿真结果的精确度和专业水准具有决定性作用。离散端口在CST软件中扮演着模拟信号输入或输出的重要角色，它们构成了仿真模型不可或缺的部分。在配置离散端口时，一个核心的原则是保证端口的方向与网格线保持一致，这是因为这样做能够有效降低计算过程中产生的误差，并确保仿真数据的有效性。如果未能遵循这一指导原则，可能会引发未知的计算问题，进而导致仿真结果失去可靠性。 在CST软件中配置离散端口，通常需要借助“Pick Points”这一功能。通过选择“Pick Edge Center”选项，端口将被设定在模型边缘的中心位置上。然而，这种做法并不总是能够确保端口与网格线保持平行。在某些特定情形下，模型的几何构造可能不允许直接选取一个与网格线平行的边作为端口的安装位置。 为了克服这一挑战，可以采用多种不同的策略。如果模型本身已经包含一条与馈电口平行的边，那么可以直接利用这条边来建立端口，此时CST软件会自动调整端口使其与网格线对齐。另一种可选的方法是，当模型不具备现成的平行边时，用户可以手动构建一个几何结构，比如一个立方体，并使其边缘与馈电口平行。通过这种方式，新建立的几何结构的边缘就可以作为端口的位置，从而确保端口与网格线的平行关系。 在实施上述操作时，必须关注端口尺寸的合理性和物理意义的一致性。端口的尺寸应当依据实际天线馈电部分的尺寸进行适当调整，过大的端口或...
【Axure实战原型】高标准农田综合服务平台RP文件
原型名称：【实战原型】高标准农田信息化管理系统 软件版本：Axure 9（支持10、11） 作品类型：智慧农业、高标农田、农业发展、农业农村、农场经济、农田管护 作品范围：Web端+APP端 原型简介： 聚焦“藏粮于地、藏粮于技”，系统融合“一张图、建设监管、生产管理、视频监控、农机调度、四情监测”六大核心功能，实现农田“可视、可管、可控、可预警”。依托物联网、GIS与AI技术，打造从建设到管护、从生产到决策的全周期数字化管理平台，助力农业提质增效、节本降耗，筑牢国家粮食安全数字化底座。
Html目录树-下载即用.zip
源码链接： https://pan.quark.cn/s/a4b39357ea24 HTML网页目录树效果是一种在网页上呈现层次结构的常用手段，特别适合于文件系统、网站导航或组织复杂信息。本文将深入阐述如何运用HTML、CSS和JavaScript（可能结合JSP）来构建这种效果，以及如何在实现该功能时维持轻量化和低资源的使用。 一、HTML基础 HTML（超文本标记语言）是网页内容的框架，负责构建网页的基本构造。在构建目录树时，我们通常借助`
.NET社区

62,271

社区成员

668,978

社区内容

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

加载中

查看更多榜单
社区公告

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

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

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

+ 用AI写文章