基于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 相关文章推荐
arguments对象
Nov 20 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
纯javascript制作日历控件
Jul 17 Javascript
搞定immutable.js详细说明
May 02 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
vue.js学习之UI组件开发教程
2017/07/03 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python实现简单文件读写函数
2021/02/25 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
文明城市标语
2014/06/16 职场文书
关于教师节的广播稿
2014/09/10 职场文书
成绩单评语
2015/01/04 职场文书
工作自我评价范文
2015/03/05 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers