`
axl234
  • 浏览: 260199 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

采用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>

分享到：
| jquery ui实现拖动排序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果...

    放大镜效果ImageZoom

    这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。 一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。 好处是能在原图附近对图片进行局部放大查看，而且可以通过...

    (适合ecshop)的放大镜效果

    适合ecshop商城的放大镜效果，带左右按钮滚动和大小图切换效果，和ecshop内含js不冲突，

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    118. 非常不错jQuery放大镜实例包下载(可放大图片与区域放大的AnythingZoomer插件) 119. 非常不错jQuery网页内容图片分类插件带特效 120. 非常实用的jquery幻灯切换广告源码 121. 非常帅的jQeruy图片切换拖影变...

    jQuery服装商城管理系统

    使用jQuery技术实现了页面轮播图，新闻播放滚动，图片左右滑动，图片放大镜，页面换肤，图片动画 等。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一、J Query实例大全 ...一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery定时图片切换代码下载 78.一款实用经典jQuery图片切换展示插件下载 79.下载jQuery动感广告图片翻转插件(PictureRoll)...

    ImageZoom 图片放大效果

    这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。 一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。 好处是能在原图附近对图片进行局部放大查看，而且可以...

    JQuery+css仿京东产品展示效果

    JQuery+css仿京东产品展示效果，里面有产品放大镜，下面有产品缩略图，可以左右滚动

    java源码包---java 源码 大量 实例

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

    java源码包2

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

    java源码包3

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

    java源码包4

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Java数组倒置 简单 Java图片加水印，支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    Java数组倒置 简单 Java图片加水印，支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印...

    傲游浏览器3(Maxthon) 3.1.8.1000 正式版

    放大镜坐标改成截图尺寸. 傲游3.1.2.1000正式版重要更新： 英文拼写检查 英文拼写检查可以在你输入过程中提示可能有错误的英文单词, 用红色波浪线进行标注, 在标注上点击鼠标右键可以看到词库的拼写建议. 当然你也...

    JAVA上百实例源码以及开源项目源代码

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

    JAVA上百实例源码以及开源项目

    　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...

Magicbox
Global site tag (gtag.js) - Google Analytics