下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、基于jquery实现图片放大功能_ 这篇文章主要为大家具体介绍了基于jquery实现图片放大功能的相关资料,具有肯定的参考价值,感爱好的伴侣可以参考一下 本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下 图片放大功能类似于淘宝上的商品的查看,假如鼠标移动到小图上就会在相应的位置显示出大图。假如自己写这些代码,会很苦痛。官方网站上供应了一个类库jquery.jqzoom.js;只需要引入次类库,引用此类库,添加一些css代码即可实现此功能; HTML框架如下: div class=jqzoom img src=images/pro_img/blue_one
2、_small.jpg class=fs alt= jqimg=images/pro_img/blue_one_big.jpg id=bigImg/ /div 留意,img中必需有jqimg属性,这个属性放的是大图的地址; js代码如下: script type=text/javascript $(function () $(.jqzoom).jqueryzoom( xzoom: 300, /放大图的宽度(默认是200) yzoom: 300, /放大图的高度(默认是200) offset: 10, /离原图的距离(默认是10) position: right, /放大图的定位(默认是right
3、) preload: 1 ) ) /script 用法:$(.jqzoom).jqueryzoom 假如只添加这么多代码效果会出来,但是不是那么的抱负。为了更加美观,必需添加如下的css代码: style type=text/css .jqzoom border:1px solid #BBB; float:left; position:relative; padding:0px; cursor:pointer; /*jQzoom*/ div.zoomdiv z-index: 999; position : absolute; top:0px; left:0px; width : 200px;
4、height : 200px; background: #ffffff; border:1px solid #CCCCCC; display:none; text-align: center; overflow: hidden; div.jqZoomPup z-index : 999; visibility : hidden; position : absolute; top:0px; left:0px; width : 50px; height : 50px; border: 1px solid #aaa; background: #ffffff url(./images/zoomlens.gif) 50% top no-repeat; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filt
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 大厦消防课程设计
- 微波集成电路AL2O3基片相关行业投资方案
- 六年级下册道德与法治(教学设计+素材)第9课《日益重要的国际组织》(第二课时)
- 商务星球版七年级地理下册 6.1 世界第一大洲 教案
- 2023年秋季高等教育自考试全国统一命题考试外科护理学(二)试卷含解析
- 创伤骨科常见护理诊断
- 历史丨天一大联考湖南省2025届高三9月大联考暨9月月考历史试卷及答案
- 2023-2024学年江苏省扬州市江都区江都区实验初级中学中考英语四模试卷含答案
- 2024年春季全国自考外科护理学(二)模拟试题含解析
- 3 营养含量(教学设计)-2023-2024学年六年级上册数学北师大版
- CJT 516-2017 生活垃圾除臭剂技术要求
- 应急预案的评估报告
- 国内宠物行业市场发展现状及竞争格局与投资前景研究报告
- GB/T 18297-2024汽车发动机性能试验方法
- 恒大集团风险分析
- 2024年4月自考00023高等数学工本试题及答案含评分参考
- 中职英语2基础模块-Unit 1- 单元测试题
- 第3课《追求人生理想》第2框《努力把人生理想变为现实》-【中职专用】《哲学与人生》同步课堂课件
- 外来医疗器械管理答辩
- 2024年度时政新闻
- 工程项目复盘分析报告
评论
0/150
提交评论