基于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 相关文章推荐
jquery实现居中弹出层代码
Aug 25 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
JavaScript 绘制饼图的示例
Feb 19 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注释实例技巧
2008/10/03 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
理解Python中的With语句
2015/02/02 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python网络编程详解
2017/10/31 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Django自带的用户验证系统实现
2020/12/18 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
什么是封装
2013/03/26 面试题
教职工代表大会主持词
2014/04/01 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
68句权威创业名言
2019/08/26 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB