基于jQuery插件实现点击小图显示大图效果


Posted in Javascript onMay 11, 2016

本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下

显示以下效果

基于jQuery插件实现点击小图显示大图效果

点击任意一张图片会显示大图

基于jQuery插件实现点击小图显示大图效果

1、前台界面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %>

<!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></title>
   <style type="text/css">
   #mydiv ul{ list-style-type:none;}
   #mydiv ul li{ display:inline;}
   #mydiv{ width:500px; border:solid 1px #444; background-color:#333;} 
   </style>
   <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
   <script src="Jquery1.7.js" type="text/javascript"></script>
   <script src="js/NFLightBox.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function () {
     //var settings = { containerResizeSpeed: 3000 };
     $('#mydiv ul a').lightBox({ containerResizeSpeed: 1000 });
    })
  
   </script>
</head>
<body>
<form id="form1" runat="server">
 <div id="mydiv" runat="server">
 
 </div>
 </form>

</body>
</html>

2、后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Text;

namespace 练习
{
 public partial class WebForm1 : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {

   if (!IsPostBack)
   {
    LoadData();
   }
  }
 private void LoadData() 
  {
   string constr = "data source=LOVE-PC\\SQLEXPRESSPC;initial catalog=BoKe;user id=sa;password=admin";
   using (SqlConnection conn = new SqlConnection(constr))
   {
    using (SqlCommand cmd =conn.CreateCommand())
    {
     conn.Open();
     cmd.CommandText = "select BigImgUrl,SmallImgUrl from T_Photo";
     SqlDataAdapter adapter = new SqlDataAdapter(cmd);
     DataTable dt = new DataTable();
     adapter.Fill(dt);
     StringBuilder sb = new StringBuilder();
     sb.Append("<ul>");
     for (int i = 0; i < dt.Rows.Count; i++)
     {
      sb.Append("<a href=" + dt.Rows[i]["BigImgUrl"] + ">");//添图片路径
      sb.Append("<li>");
      sb.Append("<img src=" + dt.Rows[i]["SmallImgUrl"] + ">");//添图片路径
      sb.Append("</li>");
      sb.Append("</a>");


     }
     sb.Append("</ul>");
      mydiv.InnerHtml = sb.ToString();
    }
   }
   
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP引用的调用方法分析
2016/04/25 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
pycharm创建一个python包方法图解
2019/04/10 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python缓存技术实现过程详解
2019/09/25 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
竞职演讲稿范文
2014/01/11 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python