當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

使用Jquery 结合后台数据库显示类似QQ图片中心

發布時間：2024/1/17 数据库 48 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Jquery 结合后台数据库显示类似QQ图片中心小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前臺： ? <%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="PhotoSliderImage.aspx.cs"
????Inherits="PhotoSliderImage"?%>

<%@?Register?Assembly="AspNetPager"?Namespace="Wuqi.Webdiyer"?TagPrefix="webdiyer"?%>
<%@?Register?Assembly="Microsoft.Web.GeneratedImage"?Namespace="Microsoft.Web"?TagPrefix="cc1"?%>
<%@?Register?Assembly="CellInPlaceEditingExtender"?Namespace="Ajax"?TagPrefix="Ajax"?%>
<%@?Register?Assembly="AjaxControlToolkit"?Namespace="AjaxControlToolkit"?TagPrefix="ajaxtoolkit"?%>
<%@?Register?Assembly="System.Web.Extensions,?Version=1.0.61025.0,?Culture=neutral,?PublicKeyToken=31bf3856ad364e35"
????Namespace="System.Web.UI"?TagPrefix="asp"?%>
<!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?id="Head1"?runat="server">
????<title>SliderImage</title>
????<link?rel="Stylesheet"?href="CSS/SliderCSS/basic.css"?type="text/css"?/>
????<link?rel="Stylesheet"?href="CSS/SliderCSS/galleriffic-5.css"?type="text/css"?/>
????<link?rel="Stylesheet"?href="CSS/SliderCSS/black.css"?type="text/css"?/>

????<script?type="text/javascript"?src="JavaScript/SliderJS/jquery-1.3.2.js"></script>

????<script?type="text/javascript"?src="JavaScript/SliderJS/jquery.history.js"></script>

????<script?type="text/javascript"?src="JavaScript/SliderJS/jquery.galleriffic.js"></script>

????<script?type="text/javascript"?src="JavaScript/SliderJS/jquery.opacityrollover.js"></script>

????<script?type="text/javascript">
????????document.write('<style>.noscript?{?display:?none;?}</style>');

????????//????????function?ViewImage(imgID)
????????//????????{
????????//????????????var?iv?=?$get('GeneratedImageForNews').src;
????????//????????????var?s?=?iv.indexOf("/News/");
????????//????????????var?resultImageView?=?iv.substring(0,?s);

????????//????????????$get('imageView').src?=?resultImageView?+?"/NewsImageHandler.ashx?imageid="?+?imgID;

????????//????????????//Setting?Image?Link
????????//????????????$get('imageFullLink').href?=?iv?+?"ImageHandler.ashx?NEWSIMAGEID="?+?imgID;
????????//????????}
????</script>

</head>
<body>
????<form?id="Form1"?runat="server">
????<ajaxtoolkit:ToolkitScriptManager?ID="ScriptManager1"?runat="server"?EnableScriptGlobalization="true">
????</ajaxtoolkit:ToolkitScriptManager>
????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server">
????????<ContentTemplate>
????????????<div?style="margin-top:?2px;?margin-left:?20px;?margin-right:?40px;">
????????????</div>
????????</ContentTemplate>
????</asp:UpdatePanel>

????<script?type="text/javascript">
????????jQuery(document).ready(function($)
????????{
????????????//?We?only?want?these?styles?applied?when?javascript?is?enabled
????????????$('div.content').css('display',?'block');

????????????//?Initially?set?opacity?on?thumbs?and?add
????????????//?additional?styling?for?hover?effect?on?thumbs
????????????var?onMouseOutOpacity?=?0.67;
????????????$('#thumbs?ul.thumbs?li,?div.navigation?a.pageLink').opacityrollover({
????????????????mouseOutOpacity:?onMouseOutOpacity,
????????????????mouseOverOpacity:?1.0,
????????????????fadeSpeed:?'fast',
????????????????exemptionSelector:?'.selected'
????????????});

????????????//?Initialize?Advanced?Galleriffic?Gallery
????????????var?gallery?=?$('#thumbs').galleriffic({
????????????????delay:?2500,
????????????????numThumbs:?6,
????????????????preloadAhead:?10,
????????????????enableTopPager:?false,
????????????????enableBottomPager:?false,
????????????????imageContainerSel:?'#slideshow',
????????????????//顯示“操作工具欄”
????????????????controlsContainerSel:?'#controls',
????????????????captionContainerSel:?'#caption',
????????????????loadingContainerSel:?'#loading',
????????????????renderSSControls:?true,
????????????????renderNavControls:?true,
????????????????playLinkText:?'Play?Slideshow',
????????????????pauseLinkText:?'Pause?Slideshow',
????????????????prevLinkText:?'&lsaquo;?上一頁',
????????????????nextLinkText:?'下一頁?&rsaquo;',
????????????????nextPageLinkText:?'Next?&rsaquo;',
????????????????prevPageLinkText:?'&lsaquo;?Prev',
????????????????enableHistory:?true,
????????????????autoStart:?false,
????????????????syncTransitions:?true,
????????????????defaultTransitionDuration:?900,
????????????????onSlideChange:?function(prevIndex,?nextIndex)
????????????????{
????????????????????//?'this'?refers?to?the?gallery,?which?is?an?extension?of?$('#thumbs')
????????????????????this.find('ul.thumbs').children()
????????????????????????????.eq(prevIndex).fadeTo('fast',?onMouseOutOpacity).end()
????????????????????????????.eq(nextIndex).fadeTo('fast',?1.0);

????????????????????//?顯示照片張數?*
????????????????????this.$captionContainer.find('div.photo-index')
????????????????????.html('Photo?'?+?(nextIndex?+?1)?+?'?of?'?+?this.data.length);
????????????????},
????????????????onPageTransitionOut:?function(callback)
????????????????{
????????????????????this.fadeTo('fast',?0.0,?callback);
????????????????},
????????????????onPageTransitionIn:?function()
????????????????{
????????????????????var?prevPageLink?=?this.find('a.prev').css('visibility',?'hidden');
????????????????????var?nextPageLink?=?this.find('a.next').css('visibility',?'hidden');
????????????????????if?(this.displayedPage?>?0)
????????????????????????prevPageLink.css('visibility',?'visible');

????????????????????var?lastPage?=?this.getNumPages()?-?1;
????????????????????if?(this.displayedPage?<?lastPage)
????????????????????????nextPageLink.css('visibility',?'visible');

????????????????????this.fadeTo('fast',?1.0);
????????????????}
????????????});

????????????gallery.find('a.prev').click(function(e)
????????????{
????????????????gallery.previousPage();
????????????????e.preventDefault();
????????????});

????????????gallery.find('a.next').click(function(e)
????????????{
????????????????gallery.nextPage();
????????????????e.preventDefault();
????????????});

????????????function?pageload(hash)
????????????{
????????????????if?(hash)
????????????????{
????????????????????$.galleriffic.gotoImage(hash);
????????????????}?else
????????????????{
????????????????????gallery.gotoIndex(0);
????????????????}
????????????}

????????????$.historyInit(pageload,?"advanced.html");
????????????$("a[rel='history']").live('click',?function()
????????????{
????????????????var?hash?=?this.href;
????????????????hash?=?hash.replace(/^.*#/,?'');
????????????????$.historyLoad(hash);

????????????????return?false;
????????????});
????????});
????</script>

????<div?id="page">
????????<div?id="container">
????????????<div?class="navigation-container">
????????????????<div?id="thumbs"?class="navigation">
????????????????????<a?class="pageLink?prev"?style="visibility:?hidden;"?href="#"?title="Previous?Page">
????????????????????</a>
????????????????????<ul?class="thumbs?noscript">
????????????????????????<asp:Repeater?ID="RptSliderImage"?runat="server"?OnItemDataBound="RptSliderImage_ItemDataBound">
????????????????????????????<ItemTemplate>
????????????????????????????????<asp:Literal?ID="litNewsImageID"?Visible="false"?runat="server"?Text='<%#Eval("ID")?%>'></asp:Literal>
????????????????????????????????<li>
????????????????????????????<%--?Using?biary?data?show?image--%>
??????????????????????????????????<%--??<asp:HyperLink?ID="HLLeaf"?CssClass="thumb"?Width="100px"?Heigh="80px"?runat="server"
????????????????????????????????????????NavigateUrl='<%#?"~/News/ImageHandler.ashx?NEWSIMAGEID="+?Eval("ID")%>'>
????????????????????????????????????<asp:Image?ID="imgScroll"?Width="100px"?Height="150px"?ImageUrl='<%#?"~/News/ImageHandler.ashx?NEWSIMAGEID="+?Eval("ID")%>'
????????????????????????????????????????runat="server"?/></asp:HyperLink>--%>
?????????????????????????????????
?????????????????????????????????<%--?Using?image?path?show?image--%>
?????????????????????????????????<asp:HyperLink?ID="HLLeaf"?CssClass="thumb"??runat="server">
????????????????????????????????????<asp:Image?ID="imgScroll"?runat="server"?/></asp:HyperLink>
???????????????????????????????????????
????????????????????????????????????</a>
????????????????????????????????????<div?class="caption">
????????????????????????????????????????<div?class="image-title">
????????????????????????????????????????????<%#Eval("NewsImageDescription")%>></div>
????????????????????????????????????</div>
????????????????????????????????</li>
????????????????????????????</ItemTemplate>
????????????????????????</asp:Repeater>
????????????????????</ul>
????????????????????<a?class="pageLink?next"?style="visibility:?hidden;"?href="#"?title="Next?Page">
????????????????????</a>
????????????????</div>
????????????</div>
????????????
????????????<div?class="content">
????????????????<div?class="slideshow-container">
????????????????????<div?id="controls"?class="float_photo">
????????????????????</div>
????????????????????<div?id="loading"?class="loader">
????????????????????</div>
????????????????????<div?id="slideshow"?class="slideshow">
????????????????????</div>
????????????????</div>
????????????</div>
????????????<div?id="caption"?class="bear1">
????????????</div>
????????????<div?style="clear:?both;">
????????????</div>
????????</div>
????</div>
????<div?style="display:?none;">
????????<asp:TextBox?ID="txtNewsImageAutoID"?runat="server"></asp:TextBox>
????</div>
????</form>
</body>
</html>

后臺：

代碼 using?System;
using?System.Collections.Generic;
using?System.Linq;
using?System.Web;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Data;
using?System.IO;
using?System.Collections;
using?System.Text;
using?System.Text.RegularExpressions;
using?Microsoft.Web;

public?partial?class?PhotoSliderImage?:?System.Web.UI.Page
{
????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????????if?(!IsPostBack)
????????{
????????????this.BindNewsImage();
????????}
????}

????private?void?BindNewsImage()
????{
????????DataSet?ds?=?new?DataSet();
????????DataView?dv;

????????TicOA.BLL.NewsImage?NewsImageBll?=?new?TicOA.BLL.NewsImage();

????????//得到所有記錄總數
????????int?recordCount?=?NewsImageBll.GetListCount("");

????????//綁定數據信息
????????ds?=?NewsImageBll.PagerGetList("",?0,?20,?"AllNewsImageManage");

????????System.Data.DataTable?dt?=?ds.Tables[0];
????????dv?=?new?DataView(dt);

????????//test?data
????????this.RptSliderImage.DataSource?=?dv;
????????this.RptSliderImage.DataBind();
????}

????protected?void?RptSliderImage_ItemDataBound(object?sender,?RepeaterItemEventArgs?e)
????{
????????string?imagePath?=?string.Empty;
????????string?imageUrl?=?string.Empty;
????????//獲取程序根目錄
????????string?tmpRootDir?=?string.Empty;
????????//轉換成絕對路徑
????????string?imagesScrollPath?=?string.Empty;
????????string?currentImageAllPath?=?string.Empty;

????????Image?imgScroll?=?(Image)e.Item.FindControl("imgScroll");
????????HyperLink?HLLeaf?=?(HyperLink)e.Item.FindControl("HLLeaf");

????????//Get?NewsImage?AutoID
????????Literal?litNewsImageIDGV?=?(Literal)e.Item.FindControl("litNewsImageID");
????????int?newsImageAutoID?=?0;

????????if?(litNewsImageIDGV?!=?null)
????????{
????????????newsImageAutoID?=?Int32.Parse(litNewsImageIDGV.Text);

????????????//Save?NewsImage?AutoID
????????????this.txtNewsImageAutoID.Text?=?newsImageAutoID.ToString();
????????}

????????//Get?ImageURL?by?NewsImageAutoID
????????TicOA.BLL.NewsImage?NewsImageBll?=?new?TicOA.BLL.NewsImage();
????????TicOA.Model.NewsImage?NewsImageModel?=?NewsImageBll.GetModel(newsImageAutoID);
????????if?(NewsImageModel.NewsImageURL?==?null)
????????{
????????????//NewsImageURL?Is?Null
????????????imgScroll.Visible?=?false;
????????????HLLeaf.Visible?=?false;
????????????HLLeaf.NavigateUrl?=?string.Empty;
????????????imgScroll.ImageUrl?=?string.Empty;
????????}
????????else
????????{
????????????//NewsImageURL?Is?Not?Null
????????????imgScroll.Visible?=?true;
????????????imageUrl?=?System.Configuration.ConfigurationManager.AppSettings["DocPath"].ToString()?+?imagePath;
????????????tmpRootDir?=?Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());
????????????imagesScrollPath?=?tmpRootDir?+?imageUrl.Replace(@"/",?@"\");
????????????//HLLeaf.NavigateUrl?=?imagesScrollPath?+?NewsImageModel.NewsImageURL.Replace(@"/",?@"\");
????????????//imgScroll.ImageUrl?=?imagesScrollPath?+?NewsImageModel.NewsImageURL;

????????????HLLeaf.NavigateUrl?=?"~/FilesData/ImgUpLoad/"?+?NewsImageModel.NewsImageURL;
????????????imgScroll.ImageUrl?=?"~/FilesData/ImgUpLoad/"?+?NewsImageModel.NewsImageURL;

????????????//Get?current?Image?all?path
????????????currentImageAllPath?=?imagesScrollPath?+?NewsImageModel.NewsImageURL;

????????????if?(File.Exists(currentImageAllPath)?==?true)
????????????{
????????????????System.Drawing.Image?image?=?System.Drawing.Image.FromFile(currentImageAllPath);
????????????????imgScroll.Height?=?Unit.Parse(image.Height.ToString());
????????????????imgScroll.Width?=?Unit.Parse(image.Width.ToString());

????????????????if?(imgScroll.Width.Value?>?imgScroll.Height.Value)
????????????????{
????????????????????if?(imgScroll.Width.Value?<?100)
????????????????????{
????????????????????????imgScroll.Width?=?Unit.Parse("");
????????????????????????imgScroll.Height?=?Unit.Parse("");
????????????????????}
????????????????????else
????????????????????{
????????????????????????imgScroll.Width?=?Unit.Parse("100px");
????????????????????????imgScroll.Height?=?Unit.Parse("");
????????????????????}
????????????????}
????????????????else
????????????????{
????????????????????if?(imgScroll.Height.Value?<?100)
????????????????????{
????????????????????????imgScroll.Width?=?Unit.Parse("");
????????????????????????imgScroll.Height?=?Unit.Parse("");
????????????????????}
????????????????????else
????????????????????{
????????????????????????imgScroll.Width?=?Unit.Parse("");
????????????????????????imgScroll.Height?=?Unit.Parse("100px");
????????????????????}
????????????????}

????????????????//HLLeaf.NavigateUrl?=?imgScroll.ImageUrl;
????????????}
????????????else
????????????{
????????????????HLLeaf.NavigateUrl?=?"";
????????????????imgScroll.Width?=?Unit.Empty;
????????????????imgScroll.Height?=?Unit.Empty;
????????????}
????????}

????????//HLFJ.NavigateUrl?=?"../PlanQuery/JZQYPlanInfo.aspx?QYBH="?+?DataBinder.Eval(e.Item.DataItem,?"企業編號").ToString();
????????//HLFJ.Target?=?"ContentFrame";
????}

}

顯示后結果如下所示：

顯示效果還有待提高，希望大家多多指教！

轉載于:https://www.cnblogs.com/litaocnblogs/archive/2010/07/14/1777225.html

總結

以上是生活随笔為你收集整理的使用Jquery 结合后台数据库显示类似QQ图片中心的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。