基于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代码编写的14条技巧
Jan 09 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
mpvue实现左侧导航与右侧内容的联动
Oct 21 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
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
PHP基础知识介绍
2013/09/17 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php命令行用法入门实例教程
2014/10/27 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
python搭建微信公众平台
2016/02/09 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python计算日期之间的放假日期
2018/06/05 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
django框架两个使用模板实例
2019/12/11 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python中如何进行连乘计算
2020/05/28 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
学院书画协会部门职责
2013/11/28 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
优秀教师演讲稿
2014/05/06 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
培训师岗位职责
2015/02/14 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript