2015年繁忙的一月份,无更多时间去学习ASP.NET MVC程序,二月份又是中国的新年,长达半个月的假期,望回到老家中,在无电脑无网络的日子里,能有更多时间陪伴年迈的父母亲。

今天学习jQuery的相关知识,应用到图片上,用户点一点图片,放大显示图片功能。

创建一个控制器FebY15Controller:

接下来创建视图Index:

标记1,添加图片样式:

标记2,添加htm代码,原片显示以及放大图片的占位div标签:

标记3,引用jQuery类库。

标记4,编写jQuery程序:

下面是动态演示:

本篇中,可以学到jQuery的click事件。使用标签.样式类获取对象(img.thumb)。使用$(this)来代码对象本身。.attr("scr")获取图片src图片路径。还有一个就是.animate()动态事件。

jQuery点缩略图显示大图片的更多相关文章

  1. android高仿微信UI点击头像显示大图片效果

    用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下: 这种UI效果对用户的体验不错,今天突然有了灵感,试着去实现,结果就出来了.. 下面说说我的思路: 1.点击图片时跳转到另 ...

  2. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. jQuery弹出美女大图片

    效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...

  4. Android 显示大图片

    主要的代码如下: BitmapFactory.Options options = new BitmapFactory.Options(); //图片解析配置 options.inJustDecodeB ...

  5. android高仿微信UI点击头像显示大图片效果, Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果

    http://www.cnblogs.com/Jaylong/archive/2012/09/27/androidUI.html http://blog.csdn.net/xiaanming/arti ...

  6. Android(java)学习笔记236:多媒体之加载大图片到内存(Bitmap API)

    1.Bitmap (API使用) android里面的bitmap中,一个像素点需要4个byte去表示,这是因为android表示颜色是" argb ":其中 a 表示是透明度,然 ...

  7. Android(java)学习笔记179:多媒体之加载大图片到内存(Bitmap API)

    1. Bitmap (API使用) android里面的bitmap中,一个像素点需要4个byte去表示,这是因为android表示颜色是" argb ":其中 a 表示是透明度, ...

  8. jQuery实现等比例缩放大图片

      在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...

  9. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

随机推荐

  1. [转] The program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing

    https://www.smartftp.com/support/kb/the-program-cant-start-because-api-ms-win-crt-runtime-l1-1-0dll- ...

  2. java模拟开锁

    java模拟开锁 service qq:928900200 Introduction to Computer Science II: CSCI142Fall 2014Lab #1Instructor: ...

  3. GPS accuracy in Android

    Get the estimated accuracy of this location, in meters. We define accuracy as the radius of 68% conf ...

  4. Android实现自适应正方形GridView(陌陌引导页面效果)

    1.http://blog.chengyunfeng.com/?p=465 2.备注,慢慢研究

  5. js 当前日期增加自然月

    js 在日期不满足的情况下就会自动加1个月,比如在当前时间为3月31号,传入1,1两个参数,预期结果为2月29日,但是结果输出了3月2日.就是如果不满就会溢出到下个月,后来看了api发现了setMon ...

  6. Populating Next Right Pointers in Each Node II--leetcode难题讲解系列

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  7. 实现快速迭代的引擎设计 - Capcom RE Engine的架构与实现

    [译]实现快速迭代的引擎设计 - Capcom RE Engine的架构与实现 ken hu· 6 天前 原文(日文):ラピッドイテレーションを実現するゲームエンジンの設計 CEDEC2016上的一个 ...

  8. 再谈LRU双链表内存管理

    N年前我写了个双链表也发了博客,还添了代码.但是那个代码不但复杂,而且还有有问题的,一直懒得整理,放在空间误导别人.最近在写服务端,今天抽点空补一篇. 关于LRU网上随便搜,有过后端经验的人应该很多都 ...

  9. 基于安卓高仿how-old.net实现人脸识别估算年龄与性别

    前几段微软推出的大数据人脸识别年龄应用how-old.net在微博火了一把,它可以通过照片快速获得照片上人物的年龄,系统会对瞳孔.眼角.鼻子等27个“面部地标点"展开分析,进而得出你的“颜龄 ...

  10. [MONGODB]: WHEN ARBITER REQUIRED FOR REPLICA SET

    October 27, 2015 · by Srinivas · in MongoDB   MongoDB replica sets provide a number of features that ...