商品图片切换+放大镜

<dl style="float:left" id="imgshow">
    <dd>
        <div class="m_c_l_movebox">
            <div>
                <div>
                    <a class="on" href="javascript:;" supsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657.jpg" bigsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657.jpg" rel="http://pic11.secooimg.com/product/500/500/76/57/10327657.jpg">
                        <img src="http://pic11.secooimg.com/product/80/80/76/57/10327657.jpg" width="80" height="80">
                        <i></i>
                    </a>
                    <a href="javascript:;" supsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_1.jpg" bigsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_1.jpg" rel="http://pic11.secooimg.com/product/500/500/76/57/10327657_1.jpg" class="imgselect">
                        <img src="http://pic11.secooimg.com/product/80/80/76/57/10327657_1.jpg" width="80" height="80">
                        <i></i>
                    </a>
                    <a href="javascript:;" supsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_2.jpg" bigsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_2.jpg" rel="http://pic11.secooimg.com/product/500/500/76/57/10327657_2.jpg" class="">
                        <img src="http://pic11.secooimg.com/product/80/80/76/57/10327657_2.jpg" width="80" height="80">
                        <i></i>
                    </a>
                    <a href="javascript:;" supsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_3.jpg" bigsrc="http://pic11.secooimg.com/product/500/500/76/57/10327657_3.jpg" rel="http://pic11.secooimg.com/product/500/500/76/57/10327657_3.jpg" class="">
                        <img src="http://pic11.secooimg.com/product/80/80/76/57/10327657_3.jpg" width="80" height="80">
                        <i></i>
                    </a>
                </div>
            </div>
        </div>
    </dd>
    <dt>
        <img class="jqzoom" src="http://pic11.secooimg.com/product/500/500/76/57/10327657.jpg" alt="http://pic11.secooimg.com/product/500/500/76/57/10327657.jpg" width="399" height="398">
        <div class="zoomspan" style="display: none; left: 0px; top: 198px;"></div>
    </dt>
</dl>

<script type="text/javascript">
    /*小图切大图*/
    $(‘#imgshow dd a‘).mouseover(function () {
        $(this).siblings().removeClass(‘on‘);
        $(this).addClass(‘on‘);
        $(‘#imgshow dt img‘).attr(‘src‘, $(this).attr(‘bigsrc‘));
        $(‘#imgshow dt img‘).attr(‘alt‘, $(this).attr(‘supsrc‘));
    });
    /*放大镜*/
    !function(a) {
        a.fn.jqueryzoom = function(b) {
            var c = {
                xzoom: 200,
                yzoom: 200,
                offset: 10,
                position: "right"
            },
            d = a(this);
            a.extend(c, b);
            var e = "";
            a(this).parent().hover(function() {
                var b = d.offset().left,
                f = d.offset().top,
                g = a(this).find("img").get(0).offsetWidth,
                h = a(this).find("img").get(0).offsetHeight,
                i = e = a(this).find("img").attr("alt");
                a(this).find("img").attr("alt", ""),
                0 == a("div.zoomdiv").size() && a(this).find("img").after("<div class=‘zoomdiv‘><img class=‘bigimg‘ src=‘" + i + "‘ width=‘height‘ height=‘160%‘/></div>"),
                0 == a("div.zoomspan").size() && a(this).find("img").eq(0).after("<div class=‘zoomspan‘></div>"),
                a("div.zoomdiv").css({
                    top: c.top,
                    left: c.left,
                }).width(c.xzoom).height(c.yzoom).show(),
                a("div.zoomspan").show(),
                a(document.body).mousemove(function(c) {
                    var d = a(".bigimg").get(0).offsetWidth,
                    e = a(".bigimg").get(0).offsetHeight,
                    i = "x",
                    j = "y";
                    if (isNaN(j) | isNaN(i)) var j = Math.round(d / g),
                    i = Math.round(e / h);
                    var k = {};
                    k.x = c.pageX,
                    k.y = c.pageY;
                    var l = k.x - b - 100,
                    m = k.y - f - 100;
                    0 > l && (l = 0),
                    l > g - 200 && (l = g - 200),
                    0 > m && (m = 0),
                    m > h - 200 && (m = h - 200),
                    a("div.zoomspan").css({
                        left: l + "px",
                        top: m + "px",
                    }),
                    scrolly = k.y - f - 1 * a("div.zoomdiv").height() / i / 2,
                    a("div.zoomdiv").scrollTop(scrolly * i),
                    scrollx = k.x - b - 1 * a("div.zoomdiv").width() / j / 2,
                    a("div.zoomdiv").scrollLeft(scrollx * j)
                })
            },
            function() {
                a(this).find("img").attr("alt", e),
                a("div.zoomdiv").hide().remove(),
                a(document.body).unbind("mousemove"),
                a(".lenszoom").remove(),
                a("div.zoomspan").hide()
            })
        }
    } (jQuery);
    //详情图片滚动,放大
    $("img.jqzoom").jqueryzoom({
         xzoom: 460,
         yzoom: $("div.info_l")[0].offsetHeight-2,
         offset: 30,
         left: 430,
         top: -1,
         position: "right"
     });
</script>
时间: 2024-10-09 19:42:07

商品图片切换+放大镜的相关文章

商品图片放大镜特效

商品图片放大镜特效 主要是基于鼠标捕获,计算放大镜移动距离原理而制成 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 #demo { 13 display: block; 14 wid

商品图片放大镜

引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.jqzoom.js"></script> // 商品图片放大镜$zoom.jqzoom({ zoomWidth: 368, zoomHeight: 368, title: false, showPreload: false, preloadImages: false}); 参考:http://www.

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

18款 非常实用 jquery幻灯片图片切换

1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>>          下载地址 2.jquery图片切换插件制作图片层叠缩放展示效果 jquery图片插件制作图片等比列缩放层叠样式,图片叠加展示.点击层叠最上层的图片依次点击缩放图片层叠缩放切换. 查看演示>> 下载地址 3.jquery图像幻灯片制作大小图片切换滚动展示 jquery图像幻

网站图片的放大镜效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <meta http-equiv=

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

自动播放——幻灯片缓冲效果&amp;&amp;带Loading效果的图片切换&amp;&amp;移动效果(按轨迹移动)

<!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-

PHP读取京东商品图片

根据京东的商品链接取出商品图片 <?php $file_path='http://item.jd.com/1163375.html'; $file_path='http://item.jd.com/11316517.html'; $str=file_get_contents($file_path); $substr=strstr($str,'<img data-img="1" width="350"'); if(strlen($substr)==0){

用纯CSS做的图片切换

前段时间做了一个用css做的图片切换.  我们先来看下html结构: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </he