商城放大镜+图片左右滚动控制

最新推荐文章于 2017-04-21 17:16:45 发布
最新推荐文章于 2017-04-21 17:16:45 发布
阅读量163 收藏
点赞数 1
分类专栏： jquery javascript 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/axl234/article/details/84216688
版权

采用livequery动态绑定事件，使用jqzoom放大

 

<!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>jquery特效,css3,html5--163css</TITLE>
<liNK rel=stylesheet type=text/css href="css/163css.css">
<script type=text/javascript src="js/jquery-1.4.3.min.js"></script>
<script type=text/javascript src="js/jquery.jqzoom.js"></script>
<script type=text/javascript src="js/jquery.livequery.js"></script>
<META name=GENERATOR content="MSHTML 8.00.6001.18876">
<BODY>
<script type=text/javascript>
$(function(){
   
    /* 鼠标移动小图，小图对应大图显示在大图上，并替换放大镜中的图*/
    $("#specList ul li img").livequery("mouseover",function(){
        var imgSrc = $(this).attr("src");
        var i = imgSrc.lastIndexOf(".");
        var unit = imgSrc.substring(i);
        imgSrc = imgSrc.substring(0,i);
        var imgSrc_small = $(this).attr("src_D");
        var imgSrc_big = $(this).attr("src_H");
        $("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
        $(this).css({"border":"2px solid #3399cc","padding":"1px"});
    });
   
    $("#specList ul li img").livequery("mouseout",function(){
        $(this).css({"border":"1px solid #ddd","padding":"2px"});
    });
   
    //使用jqzoom
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //放大图的宽度(默认是 200)
        yzoom: 300, //放大图的高度(默认是 200)
        offset: 10, //离原图的距离(默认是 10)
        position: "right", //放大图的定位(默认是 "right")
        preload:1  
    });
   
    /*如果小图过多，则出现滚动条在一行展示*/
    var btnNext = $('#specRight');
    var btnPrev = $('#specLeft')
    var ul = btnPrev.next().find('ul');

    var len = ul.find('li').length;
    var i = 0 ;
    if (len > 5) {
        $("#specRight").addClass("specRightF").removeClass("specRightT");
        ul.css("width", 54 * len)
        btnNext.click(function(e) {
            if(i>=len-5){               
                return;
            }
            i++;
            if(i == len-5){
                $("#specRight").addClass("specRightT").removeClass("specRightF");
            }
            $("#specLeft").addClass("specLeftF").removeClass("specLeftT");
            moveS(i);
        })
        btnPrev.click(function(e) {
            if(i<=0){
                return;
            }
            i--;
            if(i==0){
                $("#specLeft").addClass("specLeftT").removeClass("specLeftF");
            }
            $("#specRight").addClass("specRightF").removeClass("specRightT");
            moveS(i);
        })
    }
    function moveS(i) {
        ul.animate({left:-54 * i}, 500)
    }
    function picAuto(){
      if ($(".listImg li").size()<=5) {
        $("#specLeft,#specRight").hide();
      }
    }
    picAuto();
});
</script>
<div id="preview">
 <div class=jqzoom>
  <img id=bigImg src="images/img01s.jpg" width=310 height=310 jqimg="images/img01b.jpg">
 </div>
 <div id=spec>
  <div id=specLeft class="control specLeftT"></div>
  <div id=specList>
   <ul class=listImg>
     <li><img id=smallPicOne src="images/img01s.jpg" src_H="images/img01b.jpg" src_D="images/img01s.jpg">  </li>
     <li><img id=smallPicOne src="images/img02s.jpg" src_H="images/img02b.jpg" src_D="images/img02s.jpg">  </li>
     <li><img id=smallPicOne src="images/img03s.jpg" src_H="images/img03b.jpg" src_D="images/img03s.jpg">  </li>
     <li><img id=smallPicOne src="images/img04s.jpg" src_H="images/img04b.jpg" src_D="images/img04s.jpg">  </li>
     <li><img id=smallPicOne src="images/img01s.jpg" src_H="images/img01b.jpg" src_D="images/img01s.jpg">  </li>
     <li><img id=smallPicOne src="images/img04s.jpg" src_H="images/img04b.jpg" src_D="images/img04s.jpg">  </li>
     <li><img id=smallPicOne src="images/img01s.jpg" src_H="images/img01b.jpg" src_D="images/img01s.jpg">  </li>
   </ul>
  </div>
  <div id=specRight class="control specRightT"></div>
 </div>
</div>
</BODY>
</HTML>

axl234
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
淘宝式图片放大镜，缩略图可左右滑动
08-10
前端JQuery插件，用于图片局部放大查看，模仿淘宝式图片放大镜。底部缩略图可点击左右按钮滑动进行切换
jcarousel+jqzoom 实现图片滚动和局部图片放大镜效果
08-01
jcarousel+jqzoom 实现图片滚动和局部图片放大镜效果,电子商务网站商品展示特效
JQUERY 图片放大镜+左右滚动特效，适应商城
神夜空间
08-01 602
JQUERY 图片放大镜+左右滚动特效，适应商城
购物商城图片放大镜效果
weixin_33976072的博客
06-18 231
看到网上有许多的朋友经常问购物商城图片的放大效果，正好的是，项目中也要用到这个效果，于是从网上搜了点代码，现在展示给大家看看。 效果图展示： 代码展示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD...
jQuery商城商品图片左右滚动切换+秒杀倒计时代码
06-11
非常实用的购物商城常用jQuery商品图片左右滚动切换代码，以及左侧限时抢购秒杀倒计时代码，还有右侧的广告焦点图切换效果。
jquery jqzoom京东商城商品详细页面图片放大镜
11-17
《jQuery jqZoom：京东商城商品详细页面的图片放大镜技术解析》 在电子商务网站中，商品展示的质量往往直接影响到用户的购买决策。为了提供更优质的购物体验，京东商城在其商品详细页面上采用了一项名为jQuery ...
jQuery产品图片放大镜代码
06-24
"jQuery产品图片放大镜代码"就是一种常见的交互式图片展示技术，它能够帮助用户在不离开当前页面的情况下，对商品图片进行细致观察，提升购物体验。本文将深入探讨这个主题，解析jQuery实现图片放大镜功能的核心原理...
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip
08-12
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果...
商城展示图放大镜.rar
08-25
这个“商城图片轮播放大镜.rar”压缩包文件很可能包含了一个实现这种功能的代码库、示例或者相关资源。下面将详细讨论这个功能背后的技术原理和应用场景。 1. **放大镜效果原理**：商城展示图放大镜效果通常是通过...
JS+html仿淘宝图片放大镜预览效果
01-10
JS+html实现淘宝图片放大镜预览效果
购物网站带横向滚动条的图片展示代码
09-24
购物网站带横向滚动条的图片展示代码 购物网站带横向滚动条的图片展示代码 购物网站带横向滚动条的图片展示代码 购物网站带横向滚动条的图片展示代码 购物网站带横向滚动条的图片展示代码 购物网站带横向滚动条的图片展示代码
Jquery.jqzoom + jcarousel 实现图片滚动和局部图片放大镜效果
12-25
Jquery.jqzoom + jcarousel 实现图片滚动和局部图片放大镜效果
jQuery实用产品图片放大镜插件
12-11
bzoom是一款非常实用的jQuery产品图片放大镜插件。该放大镜插件类似于淘宝等商城网站的产品页图片放大镜。可以实现淡入淡出显示图片及图片自动轮播等功能。
商城图片放大镜效果源码
09-19
5. **无缝滚动**：当鼠标移出图片边界时，放大镜效果会无缝衔接至下一张图片。 6. **响应式设计**：适应不同设备和屏幕尺寸，确保在手机、平板和电脑上都能良好显示。 7. **CSS3动画**：利用CSS3的transition和...
js实现图片滑动及放大镜效果（仿淘宝京东图片展示）
Coder_Chang的博客
04-21 4799
代码地址： https://github.com/EsionChang/HTML/tree/master/ThreeInOne 实现效果为：
仿京东商城商品图片 缩略图+放大镜效果
weixin_33672109的博客
10-25 405
Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件（放在<head></head>中间）：<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script><%--Jquery基础包 1.2.6版本--%&...
网站常用的一种JS制作的幻灯片
TCM-caleng
07-04 1924
网站常用的一种JS制作的幻灯片webjx.comvar widths=600;var heights=400;var counts=3; //显示的图片数img1=new Image ();img1.src=1.jpg;img2=new Image ();img2.src=2.jpg
jquery放大镜以及点击小图查看大图
不吃鱼的猫
05-27 1378
第一：html页面 此处查看清晰图片 点击下面3张小图，在上面的大图中能显示，而且可以使用放大镜 "此处查看清晰图片"  使用弹出层显示大图
SSM+Vue.js驱动的家电网上商城系统设计与实现
本研究文档详细介绍了基于SSM+Vue.js的网上家电商城系统的设计与实现。该系统主要服务于家电企业或家电专营店商家，针对当前许多商家过度依赖第三方购物平台的现象，旨在为其提供一个专属的在线销售渠道。系统通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值