ASP.Net中Jquery实现图片缩略图左右滚动效果和鼠标当前选中缩略图的放大镜效果...

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量116 收藏
点赞数
文章标签： javascript 数据库 ViewUI
原文链接：http://www.cnblogs.com/caoshuai/archive/2009/11/07/1597952.html
版权

   Jquery包文件及样式下载  具体效果可参考京东商城商品图片展示
  第一步:需要导入Jquery包文件和样式文件（放在<head></head>中间）：
<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
<%--Jquery基础包 1.2.6版本--%>
<script src="jquery/jquery.jcarousel.js" type="text/javascript"></script>
<%--底部小图左右滚动脚本--%>
<script src="jquery/jquery.jqzoom.js" type="text/javascript"></script>
<%--放大镜效果脚本--%>
<link href="Style/jqzoom.css" rel="stylesheet" type="text/css" />
<%--放大镜效果样式
将鼠标移动到需要放大图片上时显示的样式（左图灰白底色的地方）可通过重写 .bigimg和.jqZoomPup两样式来控制，如：
       .bigimg
        {
            width: 800px;
            height: 600px;
        }
        .jqZoomPup
        {
            z-index: 10;
            visibility: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 50px;
            height: 50px;
            border: 1px solid #aaa;
            background: #FEDE4F 50% top no-repeat;
            opacity: 0.5;
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            filter: alpha(Opacity=50);
            cursor:
--%>
<link href="Style/jcarousel.css" rel="stylesheet" type="text/css" />
<%--底部左右滚动图片样式  此样式表中样式需根据实际需要进行调整
关键的是以下几个样式的width，height，padding，margin的数值
.jcarousel-skin-tango .jcarousel-container-horizontal ｛｝
.jcarousel-skin-tango .jcarousel-container-vertical {}
.jcarousel-skin-tango .jcarousel-clip-horizontal {}
.jcarousel-skin-tango .jcarousel-clip-vertical {}
--%>

  第二步：添加相关函数方法（放在<head></head>中间）：

<script type="text/javascript">
　　　//作为页面onload事件当页面加载时将底部小图片加载到上面大的div中
        function attachImgEventListener() {
            var imageArray = document.getElementById("mycarousel").getElementsByTagName("img");
            if (imageArray.length == 0) {
                document.getElementById("PicBig").src = "Image/Blank.gif";
                document.getElementById("Product_BigImage").jqimg = document.getElementById("PicBig").src;
                document.getElementById("Product_LittleImage").style.display = "none";
            }
            else {
                document.getElementById("PicBig").src = imageArray[0].src;
                document.getElementById("PicBig").jqimg = imageArray[0].src;
            }
        }
    </script>

    <script type="text/javascript">
　　  //加载底部左右滚动小图片
        function mycarousel_initCallback(carousel) {
            $("#mycarousel li").mouseover(function() {
                $("#Product_BigImage img")[0].src = this.getElementsByTagName("img")[0].name;
                $("#Product_BigImage img")[0].jqimg = this.getElementsByTagName("img")[0].name;
                $(this).siblings().each(function() {
                    this.getElementsByTagName("img")[0].className = "";
                })
                this.getElementsByTagName("img")[0].className = "curr";
            })
        };
        //图片放大的相关方法和参数
        $(document).ready(function() {
            $(".jqzoom").jqueryzoom({
                xzoom: 280,  // 放大图的宽
                yzoom: 220,  // 放大图的高
                offset: 10,   // 放大图距离原图的位置
                position: 'right',   // 放大图在原图的右边(默认为right)
                lens: 1
            });
　　　　 //底部小图片滚动函数  详细参数说明见底部
            jQuery("#mycarousel").jcarousel({
                initCallback: mycarousel_initCallback
            });
        });
    </script>

  第三步：页面中的代码
                <div style="float: left; width:282px">
　　　　　　　<!--此div中class必须为jqzoom-->
                    <div id="Product_BigImage" class="jqzoom">
                        <img id="PicBig" name="PicBig" style="width: 280px; height: 220px" />
                    </div>
                   <div id="Product_LittleImage" style="float: left;">
　　　　　　　　 <!--此ul中id必须为mycarousel, class可根据实际需要在jcarousel.css中调整-->
                        <ul id="mycarousel" class="jcarousel-skin-tango jcarousel-container-horizontal">
                            <!--Repeater控件在后台绑定数据,此例中PicBig字段为图片地址-->
　　　　　　　　　　<asp:Repeater runat="server" ID="PicList">
                                <ItemTemplate>
                                    <li>
                                        <img id='<%# Eval("PicBig") %>' name='<%# Eval("PicBig") %>' src='<%# Eval("PicBig") %>' />
                                    </li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </div>
                </div>

  第四步：很重要但很容易忘记的一个地方

   在<body>中添加οnlοad="attachImgEventListener()"
此处如果忘记在body中添加onload事件则在页面首次加载时底部小图片上方的大图没有图片，当鼠标移动到小图片上时才会加载

我是一只IT小小鸟
25.0元
数据库原理与应用(第二版)
22.4元

jquery-jCarousel 配置选项

属性类型

 

默认值描述
verticalboolfalse指定carousel是水平还是垂直方向滚动。

 

startinteger1开始的元素编号。
offsetinteger1初始化后第一个可见的元素编号。
sizeinteger如果size属性没指定，则为<li>元素的个数元素的个数。
scrollinteger3每次滚动切换的元素数量。
visibleintegernull如果设置此项，元素的宽度和高度值将根据区域的宽度和高度值来重新计算，以显示此数量的元素。
animationmixed"fast"滚动效果的速度("slow"或者"fast")，也可以是毫秒的整数(参见 jQuery Documentation)。如果设置为0，关闭切换效果。
easingstringnull你想使用的缓冲效果的名字 (参见 jQuery Documentation).
autointeger0指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。
wrapstringnull表示是否将第一个和最后一个元素实现连接效果。选项值可以是

 

"first"

,

"last"

或者

"both"

。如果设置为

null

，默认关闭连接效果。你也可以设置

"circular"选项实现循环效果。

例子 Circular carousel 演示如何实现此效果。

initCallbackfunctionnull在初始化carousel后调用的JavaScript函数。包含两个参数：调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。
itemLoadCallbackfunctionnull在carousel动态载入内容后调用的JavaScript函数。包含两个参数：调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemLoadCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemFirstInCallback functionnull当某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemFirstInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemFirstOutCallbackfunctionnull当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemFirstOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemLastInCallbackfunctionnull当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemLastInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemLastOutCallbackfunctionnull当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemLastOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemVisibleInCallbackfunctionnull当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemVisibleInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemVisibleOutCallbackfunctionnull当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。

 

itemVisibleOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

buttonNextCallbackfunctionnull当'next'按钮状态改变时调用的JavaScript函数。方法的返回值用于控制'next'按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonPrevCallbackfunctionnull当'previous'按钮状态改变时调用的JavaScript函数。方法的返回值用于控制'previous'按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonNextHTMLstring

 

<div></div>

自动生成的next按钮的HTML标记。如果设置为空，不创建next按钮。
buttonPrevHTMLstring

 

<div></div>

自动生成的prev按钮的HTML标记。如果设置为空，不创建prev按钮。
buttonNextEventstring"click"指定触发next操作的事件名。
buttonPrevEventstring"click"指定触发prev操作的事件名。

转载于:https://www.cnblogs.com/caoshuai/archive/2009/11/07/1597952.html

weixin_34226706
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
10-22
主要介绍了asp.net+jquery.form实现图片异步上传的方法,结合实例形式分析了jquery.form.js前台异步提交图片与asp.net后台处理的相关技巧,需要的朋友可以参考下
jq——页面滚动到显示区域，再执行动画——基础积累
yehaocheng520的博客
08-01 394
jq——页面滚动到显示区域，再执行动画——基础积累
jQuery根据滚动条位置加载相应的内容
macanfa的博客
06-28 3278
实现jQuery根据滚动条位置加载相应的内容：向下滚动时当内容区域滚动到可视窗口高度的一半时，加载动画内容；向上滚动到相应的内容区域时也重新加载动画内容！
Vue.js中结合jQuery.js实现在指定区域内图片的放大缩小、拖拽及旋转
小郝哥的博客
11-27 2967
Vue.js结合jQuery.js实现在指定区域内图片的放大缩小及拖拽 工作项目中，使用vue.js+require.js还有少量的JQuery.js组成的前端JS环境，样式用的element-ui，工作需求是要对APP端传到PC端页面的十几张甚至几十张图片进行显示，且与OCR识别图片中的信息进行人工比对，这就需要PC端的工作人员细致的查看图片，要支持在指定的div中图片可放大、缩小、可拖动。
1.使用jquery来写一个当滑动到一定位置显示另外一个div(可改任意标签，根据个人情况而定)，废话不多说上代码
m0_62202016的博客
01-06 836
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script> <style> .aa{ display:none; width:750px; height:100px; background:#5e39db; position:fixed; bottom:1000px; }...
用css jq如何实现网页滚动条滚动到相应位置才显示.
CSDN for recording problems
03-19 1516
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; paddin...
asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图
01-02
如图: 点击浏览,选择图片之后,右面显示图片 第一步: 创建CtFileUpLoad.ascx 代码如下: <%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”CtFileUpLoad.ascx.cs” Inherits=”WebParts_...
【ASP.NET编程知识】ASP.NET实现上传图片并生成缩略图的方法.docx
05-18
【ASP.NET编程知识】ASP.NET实现上传图片并生成缩略图的方法.docx
ASP.NET实现上传图片并生成缩略图的方法
10-23
主要介绍了ASP.NET实现上传图片并生成缩略图的方法,提供了一个asp.net上传图片与生成缩略图的方法,并给出了改进程序供大家对比分析,需要的朋友可以参考下
元素自动滚动到可视范围内
weixin_30326515的博客
01-19 358
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素自动滚动到可视范围内</title> <style type="text/css"> .test{...
asp.net js左右滚动效果
12-28
asp.net js左右滚动效果 源码 适合asp.net php 测试OK
asp滚动图片代码
04-18
这是一个滚动图片代码，可以实现图片的上下，左右滚动效果。
淘宝式图片放大镜，缩略图可左右滑动
08-10
前端JQuery插件，用于图片局部放大查看，模仿淘宝式图片放大镜。底部缩略图可点击左右按钮滑动进行切换
asp.net 左右滚动的图片展示效果
叮当小马的专栏
07-07 4230
左右滚动的图片展示效果
Asp.net图片滚动
Ben的专栏
03-14 2097
        滚动图片的效果（兼容火狐和IE）                                                                                                                        var speed=20jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.in
在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
我的博客新地址： http://www.n-pei.com
08-05 6604
Jquery的slideViewer插件。 1.       background:JQuery,Ext和propotype这几个js库都是很不错的东西。但是我个人还是比较喜欢JQuery,它相对于其它两个库来说更容易使用,但是Ext能够实现的一些很牛的Layout方面的东西现在JQuery还是说稍微逊色点。这里给大家介绍个使用JQuery的SlideViewer插件实现的图片的浏览功
ASP.NET图片滚动+左右控制
web开发
10-10 544
前台 &lt;TABLE style="BORDER: #ccc 1px solid;" mce_style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0&gt; &lt;TBODY&gt; &lt;TR&gt; &lt;td width="1...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 332
步骤很详细，直接上教程……
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
asp.net.mvc实现购物车
05-02
要实现购物车功能，需要在 ASP.NET MVC 中进行以下步骤： 1. 创建一个购物车模型类，该模型类应该包含商品信息和购买数量等信息。 2. 在控制器中创建添加商品到购物车、从购物车中删除商品、更新购物车中商品数量等方法。 3. 在视图中创建购物车页面，显示购物车中的商品信息、数量、价格等信息。 4. 在购物车页面中，为每个商品添加增加数量、减少数量、删除等按钮，以便用户可以方便地操作购物车。 5. 为了使购物车在不同页面之间可以共享，可以将购物车信息存储在会话中。 以下是一个简单的购物车实现示例： 1. 创建购物车模型类： ``` public class ShoppingCartItem { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } public int Quantity { get; set; } } ``` 2. 在控制器中创建添加、删除、更新购物车等方法： ``` public class ShoppingCartController : Controller { public ActionResult AddToCart(int id) { var product = _repository.GetProductById(id); var cart = GetCart(); cart.Add(product); SaveCart(cart); return RedirectToAction("Index"); } public ActionResult RemoveFromCart(int id) { var cart = GetCart(); cart.Remove(id); SaveCart(cart); return RedirectToAction("Index"); } public ActionResult UpdateCart(int id, int quantity) { var cart = GetCart(); cart.Update(id, quantity); SaveCart(cart); return RedirectToAction("Index"); } public ActionResult Index() { var cart = GetCart(); return View(cart); } private ShoppingCart GetCart() { var cart = Session["Cart"] as ShoppingCart; if (cart == null) { cart = new ShoppingCart(); Session["Cart"] = cart; } return cart; } private void SaveCart(ShoppingCart cart) { Session["Cart"] = cart; } } ``` 3. 创建购物车页面视图： ``` @model ShoppingCart <table> <tr> <th>Name</th> <th>Price</th> <th>Quantity</th> <th>Total</th> <th></th> </tr> @foreach (var item in Model.Items) { <tr> <td>@item.Name</td> <td>@item.Price</td> <td> @Html.TextBoxFor(m => item.Quantity, new { @class = "quantity-input" }) @Html.ActionLink("Update", "UpdateCart", new { id = item.Id, quantity = item.Quantity }) </td> <td>@item.Total</td> <td>@Html.ActionLink("Remove", "RemoveFromCart", new { id = item.Id })</td> </tr> } <tr> <td colspan="3"></td> <td>Total: @Model.Total</td> <td></td> </tr> </table> ``` 4. 在购物车页面中为每个商品添加增加数量、减少数量、删除等按钮： ``` @Html.TextBoxFor(m => item.Quantity, new { @class = "quantity-input" }) @Html.ActionLink("Update", "UpdateCart", new { id = item.Id, quantity = item.Quantity }) @Html.ActionLink("Remove", "RemoveFromCart", new { id = item.Id }) ``` 5. 将购物车信息存储在会话中： ``` private ShoppingCart GetCart() { var cart = Session["Cart"] as ShoppingCart; if (cart == null) { cart = new ShoppingCart(); Session["Cart"] = cart; } return cart; } private void SaveCart(ShoppingCart cart) { Session["Cart"] = cart; } ``` 这样就可以实现一个简单的 ASP.NET MVC 购物车功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值