基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码。这是一款基于jquery.imagezoom插件实现的jQuery放大镜。适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg">
<img src="data:images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="data:images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="data:images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="data:images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="data:images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="data:images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div>
</li>
</ul>
</div>
css代码:
html{overflow-y:scroll;}
body{margin:; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
div,ul,li{padding:; margin:;}
li{list-style-type:none;}
img{vertical-align:top;border:;} /* box */
.box{width:310px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:;}
via:http://www.w2bc.com/Article/26557
基于jQuery仿淘宝产品图片放大镜代码的更多相关文章
- 基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
- 【原创smarty仿淘宝商品图片轮播+放大镜效果】
1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...
- jquery.elevateZoom实现仿淘宝看图片,一张小的,一张大用于鼠标经过时候显示
实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用ele ...
- JQuery仿淘宝滚动加载图片
用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...
随机推荐
- DGN格式转化为shp格式 【转】
其实本来,我就是需要把一个autocad的dwg/dgn格式的东西导入到google earth里面:但是首先我对dwg/dgn格式的东西根本就不熟:其次我拿到的dwg/dgn格式文件是用的HK80 ...
- jquery获取第一层li
<ul id="aaa"> <li>aaa</li> <li>aaa <ul> <li>bbb</li ...
- 【python】列出http://www.cnblogs.com/xiandedanteng/p/中的标题
# 列出http://www.cnblogs.com/xiandedanteng/p/中的标题 from bs4 import BeautifulSoup import requests user_a ...
- struts2学习笔记(三)—— 在用户注冊程序中使用验证框架
实现目标: 1.使用验证框架对用户注冊信息进行验证 2.验证username.password.邮箱不能为空 3.验证username.password长度 ...
- PHP 杂项函数
PHP 杂项 函数 PHP 杂项函数简介 我们把不属于其他类别的函数归纳到杂项函数类别. 安装 杂项函数是 PHP 核心的组成部分.无需安装即可使用这些函数. Runtime 配置 杂项函数的行为受 ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
- Openerp 中打开 URL 的三种 方法
来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...
- ubuntu修改默认系统启动项
sudo gedit /etc/default/grub 文件中有一段: GRUB_DEFAULT= 0代表默认从第一项启动 1代表从第二项启动 依次类推 将数字改成你想要启动的 修改完保存关闭,然后 ...
- 基于olami开放语义平台的微信小程序遥知之源码实现
概述 实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...
- 用vue开发顶端粘滞效果的页面
概述 通常一个长的页面,需要滚动浏览,有部分重要信息会随着滚动而看不见,因此需要粘滞在顶端,而又不影响滚动浏览,这个demo基于vue2,实现这个需求. 详细 代码下载:http://www.demo ...