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. 对于程序开发者看书(指实在的书而不是PDF)的好处。(个人看法而已)

    书是实在的东西.不同PDF.他能带你进入一种学习态度的环境 书上已经所列了知识点.看了.那些知识点就是你的. 第一次看,未必完全理解到里面的东西.说不定过几天,几周,几个月,甚至几年.再看.就有可能看 ...

  2. Java Inner Classes

    When thinking about inner classes in java, the first thing that comes to my mind is that, WHY do we ...

  3. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  4. Java 部分排序算法

    . import java.io.*;import java.math.*;import java.util.*;public class Algr{ public static int array[ ...

  5. [原创]自定义view之:快速开发一款Material Design风格的dialog的开源项目MDDialog

    随着google开始主导Material Design风格的设计,越来越多的app开始使用Material Design风格来设计自己的UI.虽然在Android Studio中集成了多种快速开发框架 ...

  6. Spring3系列13-Controller和@RequestMapping

    Spring3系列13-Controller和@RequestMapping Controller返回值,String或者ModelAndView @RequestMapping关联url @Requ ...

  7. Spark1.0新特性-->Spark SQL

    Spark1.0出来了,变化还是挺大的,文档比以前齐全了,RDD支持的操作比以前多了一些,Spark on yarn功能我居然跑通了.但是最最重要的就是多了一个Spark SQL的功能,它能对RDD进 ...

  8. sqlserver 字符串最后一次的位置,截取字符串

    --reverse:字符串倒排 SUBSTRING(字段,1,len(字段)- CHARINDEX('-',REVERSE(字段)))

  9. [转]C++学习–基础篇(书籍推荐及分享)

    C++入门 语言技巧,性能优化 底层硬货 STL Boost 设计模式 算法篇 算起来,用C++已经有七八年时间,也有点可以分享的东西: 以下推荐的书籍大多有电子版.对于技术类书籍,电子版并不会带来一 ...

  10. iOS 7定制UIPageControl遇到的问题

    转自snorlax's blog 先说下ios7之前 那些点点的实现非常简单 就是UIPageControl.subviews 就是一个个点的UIImageView 所以只需简单的替换掉就好了代码如下 ...