css怎么实现京东上鼠标放上去 图片自动放大

html-css076

css怎么实现京东上鼠标放上去 图片自动放大,第1张

京东用的是一个jquery插件。

CSS可以实现大图片，但是没办法控制坐标，所以这个效果是JS实现的。

大致原理就是：

上传产品的时候，脚本自动生成一个400尺寸和一个800尺寸等多个规格的图片，通过小图片坐标计算大图片显示位置。

用 a:hover span 试试，如果你 css 非常熟，能处理好很多细节问题，有可能能行，不断的嵌套 a:hover span ，下面这个如果你看得明白的话可以试试：

<ul>

<li>

<a>

家用电器

<span>

<strong>生活电器</strong>

<ul>

<li><a>净化器</a></li>

<li><a>净水设备</a></li>

<li><a>电风扇</a></li>

</sapn>

</a>

</li>

</ul>

核心就是一个链接里面放一个span，然后这个span里面又放二级菜单的链接：

<a>一级菜单<span><ul>二级菜单</ul></sapn></a>

然后先把 span 用 display:none隐藏起来，当一级菜单的链接发生 a:hover 时，又把 span 的 display 设置为 block 使其可见。

纯 css 不上 js 并且：不用表格、条件注释的话，那上面我说的这些就是唯一的办法了。

另一种可能是：上面我说的这些根本做不到你想要的效果，因为我也没试过这么复杂的嵌套会出现什么预料之外的东西要处理，考虑各浏览器兼容问题，能否处理掉这些问题是未知的。

你至少需要解决：

IE6 下 a:hover span 无效(要让其生效需要设置一个多余的空背景，方法自行百度)

各种 z-index 问题

span 的复杂定位

其他莫名其妙的问题

...

最终结果一切未知，有兴趣的话可以自己试着写代码。

就是说京东不允许你在 body 页面全局上设置样式。

这样是京东允许的：

.user-xxx{

font-size:16px

background: yellow

}

.userList{float: left}

这也是京东允许的：

-moz-xxx{padding: 0 3px}

但是下面这些你别想了，JD不让：

body{}

html{}