基于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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
漂亮的提示信息(带箭头)
Mar 21 Javascript
javascript 短路法代码精简
Aug 20 Javascript
jquery随机展示头像代码
Dec 21 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
老生常谈的跨域处理
Jan 11 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
Zend 输出产生XML解析错误
2009/03/03 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php 使用array函数实现分页
2015/02/13 PHP
php实现微信扫码支付
2017/03/26 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
护士自荐信范文
2013/12/15 职场文书
商务考察邀请函范文
2014/01/21 职场文书
给老师的一封建议书
2014/03/13 职场文书
产品推广策划方案
2014/05/10 职场文书
公司应聘求职信
2014/06/21 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL