jQuery点缩略图弹出层显示大图片


Posted in Javascript onFebruary 13, 2015

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

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

创建一个控制器FebY15Controller:

jQuery点缩略图弹出层显示大图片

接下来创建视图Index:

jQuery点缩略图弹出层显示大图片

标记1,添加图片样式:

jQuery点缩略图弹出层显示大图片

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

jQuery点缩略图弹出层显示大图片

标记3,引用jQuery类库。

标记4,编写jQuery程序:

jQuery点缩略图弹出层显示大图片

下面是动态演示:

jQuery点缩略图弹出层显示大图片

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

Javascript 相关文章推荐
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
Js控制滑轮左右滑动实例
Feb 13 #Javascript
JavaScript函数作用域链分析
Feb 13 #Javascript
JavaScript匿名函数用法分析
Feb 13 #Javascript
js实现进度条的方法
Feb 13 #Javascript
动态加载js的方法汇总
Feb 13 #Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
jQuery向后台传入json格式数据的方法
Feb 13 #Javascript
You might like
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
python模块之re正则表达式详解
2017/02/03 Python
Python算术运算符实例详解
2017/05/31 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
简单租房协议书
2014/04/09 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
开发房地产协议书
2014/09/14 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
美容院员工规章制度
2015/08/05 职场文书
图书馆义工感想
2015/08/07 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB