`
- 浏览:
18032 次
- 性别:
- 来自:
北京
-
- <!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>鼠标滑过缩略图时放大图片</title>
- <!-- iced 0802030237 -->
- <style type="text/css">
- <!--
- * {margin:0;padding:0;}
- body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
- img {border:0}
- p {font-size:14px;}
- #imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid; position:relative;*position:static;}
- #imgmove a img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;}
- #imgmove a:hover {border:none }
- #imgmove a:hover img {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);}
- -->
- </style>
- </head>
- <body>
- <p>本例旨在展示鼠标滑到缩略图上时,放大图片。</p>
- <br />
- <br />
- <br />
- <br />
- <br />
- <ul id="imgmove">
- <li><a href="#"><img src="http://w.fj126.net/?/photo/file/preview/0807012213338140.jpg" /></a></li>
- <li><a href="#"><img src="http://w.fj126.net/?/photo/file/0807012213568422.jpg" /></a></li>
- <li><a href="#"><img src="http://w.fj126.net/?/photo/file/0807012214087864.jpg" /></a></li>
- </ul>
- </body>
- </html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
JavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript 鼠标滑过,缩略图放大显示(纯CSS).rarJavaScript ...
鼠标滑过缩略图放大显示原图是一款鼠标经过缩略图放大展示原图片,并提示图片文字信息,点击可进入相应链接
一张图片实现鼠标滑过缩略图显示大图片JS代码
原生js鼠标滑过缩略图片放大展示原图片提示图片文字信息 原生js鼠标滑过缩略图片放大展示原图片提示图片文字信息 原生js鼠标滑过缩略图片放大展示原图片提示图片文字信息
鼠标滑过,缩略图放大显示(纯CSS).rar鼠标滑过,缩略图放大显示(纯CSS).rar鼠标滑过,缩略图放大显示(纯CSS).rar鼠标滑过,缩略图放大显示(纯CSS).rar鼠标滑过,缩略图放大显示(纯CSS).rar鼠标滑过,缩略图放大...
jQuery 鼠标经过 缩略图 放大 图片特效 完整 实例
鼠标滑过缩略图时放大图片(纯Css)
点击缩略图,弹出层,显示大图片, JS+CSS
鼠标滑过缩略图放大显示原图是一款鼠标经过缩略图放大展示原图片,并提示图片文字信息,点击可进入相应链接
JS脚本特效,实现鼠标移动放大图片,类似于一个图片放大镜。当移动鼠标时,会在右侧缩略图中生成一个边框以确定放大位置,然后随着你的鼠标移动左侧经放大的图像显示出来,看上去很逼真。
内容索引:脚本资源,jQuery,图片放大 jQuery+CSS超炫的鼠标经过缩略图放大图片效果,不用多介绍了吧?现在网页上有很多这种类似的效果,像淘宝网、拍拍网等各大购物网站以及产品一类的网站很常见,同样使用了jQuery...
jquery图片滚动特效,制作单排列表图片左右滚动,鼠标滑过图片放大展示,图片左右滚动,图片滚动到最后一张,按钮失去焦点的jQuery图片滚动。jQuery下载。
jquery实现鼠标滑过图片向上放大显示效果,里面用有CSS3的部分属性,因此为了最佳效果,测试时候请使用火狐或Chrome浏览器。左右两边的圆形按钮可控制缩略图左右滚动,然后可以把鼠标放在任意的缩略图上,可看到缩略...
jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 jquery异步加载图片的插件jqGalScroll...
产品多图展示带放大镜效果是一款鼠标滑过缩略图自动进行切换,带有放大镜效果。
实现的效果鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图...
ZoomIt.js是一款jquery图片放大插件。该 jquery图片放大插件在鼠标经过或悬停在图片上时,使用高清大图来代替缩略图。移动鼠标可以查看高清大图的各个部分内容。
之前我们分享过一个基于jQuery的放大镜特效插件,可以将...今天我们要来分享一款基于jQuery的图片放大预览插件,只需要将鼠标滑过缩略图,即可将当前区域的图片放大预览,这个功能一般在商品图片展示的时候非常有用。
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
最近项目遇到个需求,需要的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。经过一番思索,用下面的方法实现了本效果,这里分享给大家。