支持移动端，PC端图片弹出层(支持键盘)资源-CSDN文库

共115个文件

png：90个

jpg：10个

js：8个

5星 · 超过95%的资源需积分: 10 62 浏览量 2016-07-09 17:58:21 上传评论收藏 3.87MB ZIP 举报

标题中的“支持移动端，PC端图片弹出层(支持键盘)”指的是一个跨平台的图片查看功能，它可以在桌面计算机（PC端）和移动设备（移动端）上运行，并且支持通过键盘进行交互。这个功能通常应用于网页设计中，使得用户可以方便地预览或浏览大图，而不仅仅是小缩略图。在网页开发中，这样的图片弹出层常用于相册、产品展示或任何需要详细查看图片的场景。描述中的链接指向了一篇CSDN博客文章，该文章详细介绍了如何实现这样一个功能。作者libin_1提供了一个实现方法，可能包括JavaScript、CSS和HTML等技术的综合运用，确保在不同设备上都能正常工作，并且允许用户通过键盘导航，提升用户体验。标签“图片”和“弹出层”进一步明确了这个功能的核心。图片处理是网页开发中的基础部分，而弹出层则是一种常见的交互设计模式，用于显示额外的信息或内容，如大图预览，而不离开当前页面。这种弹出层通常由JavaScript控制，以响应用户的点击事件或其它交互行为。在提供的压缩包文件名称列表中，我们可以推测其中包含了实现这个功能所需的一些关键文件： 1. `index.html` 和 `index1.html`：这是网页的主入口文件，可能包含了HTML结构以及与JavaScript和CSS的链接。 2. `.project`：这通常是Eclipse或类似的IDE项目配置文件，包含了项目的设置信息。 3. `css` 文件夹：这里可能包含样式表文件，用于定义弹出层及网页的外观和布局。 4. `img` 和 `images` 文件夹：这些可能存储了用于测试或示例的图片资源。 5. `js` 文件夹：这个目录很可能包含JavaScript代码，实现了弹出层的逻辑，包括图片的加载、键盘导航等功能。这个项目涉及到了前端开发的多个方面，包括响应式设计（适应移动端和PC端）、JavaScript事件处理（键盘导航）、CSS布局（创建弹出层）以及HTML结构（展示图片）。实现这样的功能需要对这些技术有深入的理解，同时也需要关注用户体验和跨平台兼容性。开发者需要考虑如何优雅地处理图片加载、优化性能，以及在不同屏幕尺寸和输入设备上保持一致的交互体验。

资源推荐

资源详情

资源评论

收起资源包目录

支持移动端，PC端图片弹出层(支持键盘) （115个子文件）

touchTouch.css 5KB

styles.css 3KB

preloader.gif 23KB

index.html 1KB

index1.html 117B

6.jpg 914KB

swiper-1.jpg 191KB

3.jpg 191KB

7.jpg 136KB

5.jpg 68KB

4.jpg 48KB

11.jpg 13KB

t0145823d571081ca40.jpg 10KB

2.jpg 8KB

1.jpg 7KB

jquery.js 251KB

jquery-2.1.4.js 242KB

jquery.min.js 82KB

my加注释.js 5KB

touchTouch.jquery_xiugai.js 5KB

touchTouch.jquery官方的.js 5KB

touchTouch.jquery.js 5KB

script.js 78B

home_c5_b_d.png 257KB

home_c5_a_d.png 245KB

about_c3_bj.png 227KB

home_c5_c_d.png 171KB

home_c3_bj.png 152KB

tx.png 136KB

picture.png 88KB

home_banner-3.png 85KB

about_c1_bj.png 75KB

home_c5_d_d.png 68KB

6.png 66KB

home_c5_f_d.png 66KB

home_c5_e_d.png 50KB

home_xq_img.png 49KB

banner_01.png 26KB

top_banner.png 24KB

banner_02.png 24KB

home_xf_banner.png 22KB

banner.png 20KB

home_c5_b-2.png 20KB

btn.png 19KB

about_c2_z.png 17KB

about_c2_x.png 17KB

home_c5_a-2.png 17KB

about_c2_h.png 16KB

home_c5_c.png 16KB

about_c2_t.png 14KB

icon.png 12KB

pj_tx.png 10KB

icon_014.png 8KB

home_c5_d.png 8KB

icon_015.png 8KB

moon_003.png 8KB

icon_018.png 7KB

icon_016.png 7KB

icon_017.png 7KB

home_c5_f.png 6KB

icon_0001.png 6KB

home_c5_e.png 6KB

moon_001.png 5KB

icon_019.png 5KB

logo_icon.png 5KB

icon_005.png 4KB

moon_004.png 4KB

home_c3_bz.png 4KB

icon_011.png 4KB

cloud.png 3KB

icon_001.png 3KB

icon_006.png 3KB

icon_hand.png 3KB

icon_008.png 3KB

good_icon.png 3KB

quickly_icon.png 3KB

simple_icon.png 3KB

province_icon.png 3KB

home_c4_a.png 3KB

icon_012.png 2KB

icon_013.png 2KB

icon_007.png 2KB

icon_009.png 2KB

home_c4_b.png 2KB

arrows.png 2KB

moon_002.png 2KB

line.png 2KB

icon_010.png 2KB

home_c2_k.png 2KB

moon.png 2KB

home_c4_c.png 2KB

home_c2_s.png 1KB

Arrow_left.png 1KB

home_c2_h.png 1KB

Arrow_right.png 1KB

home_c2_j.png 1KB

home_more.png 1KB

icon_002.png 1KB

home_c5_yuan.png 1KB

共 115 条

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" /> <title>jquery实现的触摸相册效果</title> <link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/touchTouch.css" /> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript" src="js/touchTouch.jquery_xiugai.js"></script> <script type="text/javascript"> $(function() { $('#thumbs a').touchTouch(); }); </script> </head> <body> <div id="thumbs"> <a href="img/1.jpg" style="background-image:url(img/1.jpg)"></a> <a href="img/2.jpg" style="background-image:url(img/2.jpg)"></a> <a href="img/3.jpg" style="background-image:url(img/3.jpg)"></a> <a href="img/4.jpg" style="background-image:url(img/4.jpg)"></a> <a href="img/5.jpg" style="background-image:url(img/5.jpg)"></a> <a href="img/6.jpg" style="background-image:url(img/6.jpg)"></a> </div> </body> </html>

评论收藏

内容反馈