购物图片放大镜jq例子.rar资源-CSDN下载

共90个文件

jpg：32个

js：21个

gif：18个

购物图片放大镜

5星 · 超过95%的资源需积分: 9 121 浏览量 2011-03-08 17:45:29 上传评论 3 收藏 1.73MB RAR 举报

购物图片放大镜是一种常见的网页交互功能，特别是在电商网站上，它允许用户在不离开产品页面的情况下，通过鼠标悬停或点击来查看商品图片的局部细节。这个“购物图片放大镜jq例子.rar”压缩包文件包含了一个使用jQuery实现的购物图片放大镜功能的示例。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在这个案例中，jQuery被用来创建一个动态的图片放大镜效果，提高了用户体验。 `index.html`和`detail.html`是HTML文件，它们定义了网页的基本结构和内容。其中，`index.html`可能是主页面，而`detail.html`可能是用于展示商品详情的页面。在这些文件中，我们可能会看到一个或多个带有大图和小图的图片元素，以及相关的JavaScript代码引用。 `scripts`目录可能包含了实现放大镜功能的JavaScript文件。这些文件可能命名为如`jquery.js`（jQuery库本身）和`imageZoom.js`（自定义的放大镜脚本）。`imageZoom.js`中会包含实现放大镜效果的函数和逻辑，比如监听鼠标移动事件，计算放大镜的位置和缩放比例，以及显示或隐藏放大镜的iframe或者div元素。 `styles`目录下的CSS文件（例如`style.css`）则负责定义页面样式，包括图片、放大镜容器、以及可能的边框、阴影等视觉效果。通过CSS，我们可以精确控制放大镜的外观和位置，使其与页面设计协调一致。 `images`目录则包含了实际的图片资源，包括原始的商品图片和可能的预览图。在实现放大镜功能时，大图通常在后台加载，当用户需要查看细节时才显示。这个例子的核心原理是利用jQuery选择器找到图片元素，然后绑定鼠标事件，当鼠标在小图上移动时，根据鼠标位置改变放大镜内的大图显示区域。同时，放大镜的大小和位置也会实时更新，以反映出鼠标在小图上的位置。 "购物图片放大镜jq例子.rar"提供了一个基于jQuery的简单但实用的解决方案，帮助开发者快速集成图片放大镜功能到他们的电商项目中。通过学习这个例子，我们可以了解如何利用jQuery进行DOM操作、事件监听以及与CSS结合实现动态效果，提升网页的交互性和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

购物图片放大镜jq例子.rar （90个子文件）

detail.html 7KB

scripts

ad.js 789B

scroll.js 612B

tab.js 757B

switchImg.js 497B

use_jqzoom.js 318B

jquery-1.3.1.js 115KB

jquery.jqzoom.js 5KB

star.js 422B

imgHover.js 721B

imgSlide.js 1KB

tree.js 395B

nav.js 257B

switchColor.js 657B

changeSkin.js 585B

jquery.livequery.js 7KB

finish.js 768B

jquery.cookie.js 4KB

slide.js 393B

sizeAndprice.js 416B

jquery.thickbox.js 12KB

tooltip.js 715B

styles

thickbox.css 4KB

header.css 1KB

index.css 4KB

nav.css 752B

detail.css 5KB

skin

skin_5.css 122B

skin_1.css 122B

skin_0.css 122B

skin_2.css 122B

skin_3.css 122B

skin_4.css 123B

main.css 83B

base.css 409B

images

left.gif 571B

treeview-expanded.gif 320B

right.gif 582B

zoom.gif 646B

img_1.jpg 11KB

img_3.jpg 15KB

look.gif 673B

star-matrix.gif 5KB

img_4.jpg 8KB

pro_img

blue_two_small.jpg 17KB

yellow_one.jpg 3KB

green_two_big.jpg 159KB

green_one_small.jpg 20KB

yellow_two.jpg 4KB

yellow_three_big.jpg 110KB

green_one_big.jpg 147KB

blue_three.jpg 2KB

yellow_two_big.jpg 112KB

yellow_three.jpg 3KB

blue.jpg 1KB

yellow.jpg 1KB

green_two_small.jpg 30KB

blue_two_big.jpg 136KB

blue_one.jpg 3KB

yellow_two_small.jpg 41KB

yellow.html 183B

blue_one_big.jpg 150KB

green_one.jpg 3KB

blue_three_big.jpg 142KB

yellow_three_small.jpg 41KB

yellow_one_small.jpg 31KB

green.jpg 1KB

blue_three_small.jpg 31KB

blue_one_small.jpg 21KB

blue_two.jpg 2KB

green.html 118B

green_two.jpg 3KB

yellow_one_big.jpg 215KB

blue.html 177B

btn_cart.png 1KB

theme.gif 2KB

loadingAnimation.gif 6KB

treeview-collapsed.gif 323B

zoomlens.gif 102B

ads

1.gif 60KB

4.gif 34KB

3.gif 58KB

5.gif 56KB

2.gif 42KB

up.gif 108B

down.gif 109B

treeview-item.gif 199B

img_2.jpg 8KB

common.jpg 12KB

index.html 7KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jane shopping</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <link rel="stylesheet" href="styles/index.css" type="text/css" /> <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="scripts/jquery.cookie.js" type="text/javascript"></script> <script src="scripts/nav.js" type="text/javascript"></script> <script src="scripts/changeSkin.js" type="text/javascript"></script> <script src="scripts/slide.js" type="text/javascript"></script> <script src="scripts/scroll.js" type="text/javascript"></script> <script src="scripts/tooltip.js" type="text/javascript"></script> <script src="scripts/tree.js" type="text/javascript"></script> <script src="scripts/ad.js" type="text/javascript"></script> <script src="scripts/imgHover.js" type="text/javascript"></script> <script src="scripts/imgSlide.js" type="text/javascript"></script> </head> <body>  <div id="header"> <a id="logo" href="#">Jane Shopping</a> <ul id="skin"> <li id="skin_0" title="蓝色" class="selected">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div>   <div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">衬衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div>   <div id="content"> <div class="content_left"> <div class="global_module news"> <h3>最新动态</h3> <div class="scrollNews" > <ul> <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> </ul> </div> <p class="module_up_down"><img src="images/down.gif" alt="" /></p> </div> <div class="global_module procatalog"> <h3>产品分类</h3> <ul class="m-treeview"> <li class="m-expanded"> <span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded"> <span>卫衣</span> <ul> <li ><span>开襟卫衣</span></li> <li ><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded"> <span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul> <p class="module_up_down"><img src="images/down.gif" alt="" /></p> </div> </div> <div class="content_right"> <div class="ad" > <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/></li> <li><img src="images/ads/3.gif"/></li> <li><img src="images/ads/4.gif"/></li> <li><img src="images/ads/5.gif"/></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="global_module prolist"> <h3>新款上市</h3> <div class="prolist_content"> <ul> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> </ul> </div> <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p> </div> </div> </div>  </body> </html>

评论收藏

内容反馈