代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS圖集局部放大鏡jquery特效兼容性強

來源:本站原創 發布時間:2019-03-30 00:00:00熱度:我要評論(0

免費下載,無需注冊無需充值

       這是比較流行的一種圖集展示效果,適合絕大多數的內容展示,由極簡主義的秀站網SEO分享,把這個效果的代碼做到最簡單。美觀漂亮的JQuery,并沒有固定圖片尺寸比例(很多是正方形的),能比較自由控制展示效果。

二手汽車展示JS效果樣式

圖集展示放大鏡、底部左右滾動JQuery

       結合dedecms內容管理系統,需要運用頻道模型的圖集模型做圖片展示,代碼比較簡單。可以找到頻道模型-內容模型管理-圖片集模型(點擊紅圈復制),附加表也修改為dede_addonimages就行,如果不想影響原有表可以按照默認設置。提醒大家如果不需要用到的模型可以禁用,只啟用自己需要的模型。

dedecms增加復制內容模型系統模型

       如果要做商品購物功能,就必須是商品模型就需要把多個圖片分部作為自定義字段,如果字段不為空,則調用該圖片;否則調用默認圖片:defaultpic.gif。參考文章《dedecms判斷自定義字段是否為空輸出指定文字或圖片內容》

商品展示JS放大效果判斷自定義字段為空輸出默認圖片

實現自定義字段為空則輸出指定圖片效果

在頁面</head>前引入JS,路徑根據自己的實際情況修改

<script type="text/javascript" src="{dede:global.cfg_basehost/}/js/jquery1.42.min.js"></script>

前臺HTML代碼

<p class="preview">
<p id="vertical" class="bigImg">
  <img src="{dede:field.litpic/}" width="400" height="400" alt="" id="midimg" />
  <p style="display:none;" id="winSelector"></p>
</p><!--bigImg end-->
<p class="smallImg">
  <p class="scrollbutton smallImgUp disabled"></p>
  <p id="imageMenu">
   <ul>{dede:productimagelist}
    <li><img src="[field:imgsrc /]" width="68" height="68" alt="[field:text /]"/></li>{/dede:productimagelist}                   
   </ul>
  </p>
  <p class="scrollbutton smallImgDown"></p>
</p><!--smallImg end-->
<p id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></p> 
</p><!--preview end-->

把下面的JS放到</body>之前

<script type="text/javascript">
$(document).ready(function(){
// 圖片上下滾動
var count = $("#imageMenu li").length - 5; /* 顯示 6 個 li標簽內容 */
var interval = $("#imageMenu li:first").width();
var curIndex = 0;
$('.scrollbutton').click(function(){
if( $(this).hasClass('disabled') ) return false;
if ($(this).hasClass('smallImgUp')) --curIndex;
else ++curIndex;
$('.scrollbutton').removeClass('disabled');
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
$("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 580);
});
// 解決 ie6 select框 問題
$.fn.decorateIframe = function(options) {
        if ($.browser.msie && $.browser.version < 7) {
            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
            $(this).each(function() {
                var $myThis = $(this);
                //創建一個IFRAME
                var pIframe = $("<iframe />");
                pIframe.attr("id", opts.iframeId);
                pIframe.css("position", "absolute");
                pIframe.css("display", "none");
                pIframe.css("display", "block");
                pIframe.css("z-index", opts.iframeZIndex);
                pIframe.css("border");
                pIframe.css("top", "0");
                pIframe.css("left", "0");
                if (opts.width == 0) {
                    pIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                if (opts.height == 0) {
                    pIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                }
                pIframe.css("filter", "mask(color=#fff)");
                $myThis.append(pIframe);
            });
        }
    }
    $.fn.decorateIframe.defaults = {
        iframeId: "decorateIframe1",
        iframeZIndex: -1,
        width: 0,
        height: 0
    }
    //放大鏡視窗
    $("#bigView").decorateIframe();
    //點擊到中圖
    var midChangeHandler = null;
    $("#imageMenu li img").bind("click", function(){
if ($(this).attr("id") != "onlickImg") {
midChange($(this).attr("src").replace("small", "mid"));
$("#imageMenu li").removeAttr("id");
$(this).parent().attr("id", "onlickImg");
}
}).bind("mouseover", function(){
if ($(this).attr("id") != "onlickImg") {
window.clearTimeout(midChangeHandler);
midChange($(this).attr("src").replace("small", "mid"));
$(this).css({ "border": "3px solid #959595" });
}
}).bind("mouseout", function(){
if($(this).attr("id") != "onlickImg"){
$(this).removeAttr("style");
midChangeHandler = window.setTimeout(function(){
midChange($("#onlickImg img").attr("src").replace("small", "mid"));
}, 1000);
}
});
    function midChange(src) {
        $("#midimg").attr("src", src).load(function() {
            changeViewImg();
        });
    }
    //大視窗看圖
    function mouseover(e) {
        if ($("#winSelector").css("display") == "none") {
            $("#winSelector,#bigView").show();
        }
        $("#winSelector").css(fixedPosition(e));
        e.stopPropagation();
    }
    function mouseOut(e) {
        if ($("#winSelector").css("display") != "none") {
            $("#winSelector,#bigView").hide();
        }
        e.stopPropagation();
    }
    $("#midimg").mouseover(mouseover); //中圖事件
    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //選擇器事件
    var $pWidth = $("#winSelector").width(); //選擇器寬度
    var $pHeight = $("#winSelector").height(); //選擇器高度
    var $imgWidth = $("#midimg").width(); //中圖寬度
    var $imgHeight = $("#midimg").height(); //中圖高度
    var $viewImgWidth = $viewImgHeight = $height = null; //IE加載后才能得到 大圖寬度 大圖高度 大圖視窗高度
    function changeViewImg() {
        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
    }
    changeViewImg();
    $("#bigView").scrollLeft(0).scrollTop(0);
    function fixedPosition(e) {
        if (e == null) {
            return;
        }
        var $imgLeft = $("#midimg").offset().left; //中圖左邊距
        var $imgTop = $("#midimg").offset().top; //中圖上邊距
        X = e.pageX - $imgLeft - $pWidth / 2; //selector頂點坐標 X
        Y = e.pageY - $imgTop - $pHeight / 2; //selector頂點坐標 Y
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X + $pWidth > $imgWidth ? $imgWidth - $pWidth : X;
        Y = Y + $pHeight > $imgHeight ? $imgHeight - $pHeight : Y;
        if ($viewImgWidth == null) {
            $viewImgWidth = $("#bigView img").outerWidth();
            $viewImgHeight = $("#bigView img").height();
            if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                $viewImgWidth = $viewImgHeight = 800;
            }
            $height = $pHeight * $viewImgHeight / $imgHeight;
            $("#bigView").width($pWidth * $viewImgWidth / $imgWidth);
            $("#bigView").height($height);
        }
        var scrollX = X * $viewImgWidth / $imgWidth;
        var scrollY = Y * $viewImgHeight / $imgHeight;
        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        $("#bigView").css({ "top": 0, "left": 690 });//大圖相對位置,根據實際情況修改
        return { left: X, top: Y };
    }
});
</script>

CSS樣式部分

/*proview*/
.bodyproview .slideBox{height:235px;margin-bottom:20px;}
.bodyproview .slideBox img{height:235px;}
.main{background:#003c7b}
.preview{position:relative;width:660px; height:465px;background:#fff}
/* smallImg */
.smallImg{position:relative; height:52px; margin-top:1px; padding:6px 5px; width:650px; overflow:hidden;float:left;}
.scrollbutton{width:24px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(../images/left.gif) no-repeat center center;}
.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(../images/right.gif) no-repeat center center; margin-left:625px; margin-top:-50px;}
#imageMenu {height:50px; width:600px; overflow:hidden; margin-left:5px; float:left;}
#imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
#imageMenu li img{width:50px; height:50px;cursor:pointer;}
#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
/* bigImg */
.bigImg{position:relative; float:left; width:660px; height:400px; overflow:hidden;}
.bigImg #midimg{width:660px; height:400px;}
.bigImg #winSelector{width:235px; height:210px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
/* bigView */
#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
#bigView img{position:absolute;}

轉載請注明來源網址:http://www.yxrxyy.live/dedecms_jq/1426.html

    發表評論

    評論列表(條)

      北京28是什么彩票