欢迎来到六久阁织梦模板网!
织梦图集局部放大镜jquery特效

织梦图集局部放大镜jquery特效

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 六久阁

更新日期: 2018-10-12

文章简介

这是比较流行的一种图集展示效果,适合绝大多数的内容展示,把这个效果的代码做到最简单。美观漂亮的JQuery,并没有固定图片尺寸比例(很多是正方形的),能比较自由控制展示效果。 图集展示放大镜、底部左右滚动JQuery 结合dedecms内容管理系统,需要运用频

  • 正文开始
  • 热门文章

这是比较流行的一种图集展示效果,适合绝大多数的内容展示,把这个效果的代码做到最简单。美观漂亮的JQuery,并没有固定图片尺寸比例(很多是正方形的),能比较自由控制展示效果。

织梦图集局部放大镜jquery特效

图集展示放大镜、底部左右滚动JQuery

结合dedecms内容管理系统,需要运用频道模型的图集模型做图片展示,代码比较简单。可以找到频道模型-内容模型管理-图片集模型(点击红圈复制),附加表也修改为dede_addonimages就行,如果不想影响原有表可以按照默认设置。提醒大家如果不需要用到的模型可以禁用,只启用自己需要的模型。

织梦增加复制内容模型系统模型

如果要做商品购物功能,就必须是商品模型就需要把多个图片分部作为自定义字段,如果字段不为空,则调用该图片;否则调用默认图片:defaultpic.gif。参考文章《织梦自定义字段是否为空输出文字或图片

商品展示JS放大效果判断自定义字段为空输出默认图片

实现自定义字段为空则输出指定图片效果

在页面</head>前引入JS,路径根据自己的实际情况修改

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

前台HTML代码

<div class="preview">
<div id="vertical" class="bigImg">
<img src="{dede:field.litpic/}" width="400" height="400" alt="" id="midimg" />
<div style="display:none;" id="winSelector"></div>
</div><!--bigImg end-->
<div class="smallImg">
<div class="scrollbutton smallImgUp disabled"></div>
<div id="imageMenu">
<ul>{dede:productimagelist}
<li><img src="[field:imgsrc /]" width="68" height="68" alt="[field:text /]"/></li>{/dede:productimagelist}
</ul>
</div>
<div class="scrollbutton smallImgDown"></div>
</div><!--smallImg end-->
<div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>
</div><!--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 divIframe = $("<iframe />");
divIframe.attr("id", opts.iframeId);
divIframe.css("position", "absolute");
divIframe.css("display", "none");
divIframe.css("display", "block");
divIframe.css("z-index", opts.iframeZIndex);
divIframe.css("border");
divIframe.css("top", "0");
divIframe.css("left", "0");
if (opts.width == 0) {
divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
}
if (opts.height == 0) {
divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
}
divIframe.css("filter", "mask(color=#fff)");
$myThis.append(divIframe);
});
}
}
$.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 $divWidth = $("#winSelector").width(); //选择器宽度
var $divHeight = $("#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; //中图左边距  www.lol9.cn织梦模板
var $imgTop = $("#midimg").offset().top; //中图上边距
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
X = X < 0 ? 0 : X;
Y = Y < 0 ? 0 : Y;
X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
if ($viewImgWidth == null) {
$viewImgWidth = $("#bigView img").outerWidth();
$viewImgHeight = $("#bigView img").height();
if ($viewImgWidth < 200 || $viewImgHeight < 200) {
$viewImgWidth = $viewImgHeight = 800;
}
$height = $divHeight * $viewImgHeight / $imgHeight;
$("#bigView").width($divWidth * $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;}


插件下载说明

未提供下载提取码的插件,都是站长辛苦开发!需要的请联系本站客服或者站长!

织梦二次开发QQ群

本站客服QQ号:3149518909(点击左边QQ号交流),群号(383578617) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!

转载请注明: 织梦模板 » 织梦图集局部放大镜jquery特效

  • 织梦dedecms手机站m目录下不生成index.html实现动态更新
    阅读
    用 织梦建站 会手机站首页不更新的苦恼,每次 PC 更新,要去删除 m 目录下的 index.html ,手机站首页才会更新,这样很麻烦,通过以下修改,让手机站首页是动态的,不生成 index.html , PC 端更新后,手机端首页自动更新。 把 \m\index.php 里面的 $row[sho...
  • 织梦Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201的解决方法
    阅读
    织梦系统安装好后,进入后台,出现Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201 一般出现这个问题是因为升级网站引起的。我们可以直接把错误提示这段代码删除或者屏蔽就行了。 打开/dede/sys_info.php,找到201...
  • 织梦dedecms提交自定义表单后发送到指定邮箱
    阅读
    网上很多教程都是用 dedecms 自带的邮件库发送邮件,而且是写死要发送的字段内容,今天我们用 phpmailer 来给站长发送自定义表单提交的数据到指定邮箱上 (QQ 邮箱, 163 邮箱都可以 ) ,不写死任何东西,有什么字段就提交发送什么字段。 操作之前,我们要先...
  • 织梦dedecms网站添加打赏功能
    阅读
    有时我们看到别人家的织梦dedecms网站有打赏功能,是不是羡慕嫉妒恨呢?今天我来给大家讲讲织梦网站怎么添加支付宝、微信打赏功能。 二、首先登陆畅言后台(没有畅言账号的首先注册账号) 三、进入后台,找到实验室--打赏 四、设置配置信息,保存。 五、复制...
  • 织梦获取当前栏目id并判断使当前导航栏目高亮
    阅读
    织梦导航栏目高亮代码如下: {dede:field name=typeid runphp=yes} if(@me==8) @me=1; else @me=0; {/dede:field} 导航的写法, 比如:lia href={dede:type typeid=7}[field:typelink /]{/dede:type} {dede:field name=typeid runphp=yes} if(@me==7) @me=cl...
  • 织梦一级目录作域名list.php无法跳转到手机站解决方法
    阅读
    最近测试了 www.lol9.cn/m/list.php?tid=1 在手机站访问的时候,无法跳转到手机的模板,终于找到了解决了方法,给大家分享一下 修改根目录下的 m/list.php 文件 重新弄的代码, 不区分几级目录,理论是根据你指定的 PC ,重新指定手机的模板 (也就是说,直...
  • 织梦小说站上一章节下一章节修改arc.archives.class.php的实现方法
    阅读
    织梦小说站上一章节下一章节实现方法,通过修改include/arc.archives.class.php这个文件来实现这样的效果: 实现原理:通过writer作者栏来匹配所有章节,然后根据文章ID排序来实现织梦小说文章上一章节下一章节。 部分代码截图: 附:arc.archives.class.php...
  • 织梦手机站下一篇变上一篇而且还出错Request Error!
    阅读
    最新的织梦dedecms程序手机版下一篇变上一篇而且还出错Request Error!,这是因为官方写错了一个地方 打开 /include/arc.archives.class.php 找到 $mlink = view.php?aid=.$preRow[id]; 注意:这个文件里面有2个上面的代码,真正要改的是大概在 839 行 改成 $...
  • 织梦dedecms做到这几条安全设置,网站安全达到99%
    阅读
    一、数据库安全 dedecms 使用的是 mysql 数据库,那么 Mysql 数据库信息不要设置得过于简单,建议不要使用 root 用户,单独建立新用户,并给予: SELECT 、 INSERT 、 UPDATE 、 DELETE 、 CREATE 、 DROP 、 INDEX 、 ALTER 、 CREATE TEMPORARY TABLES 权...
  • 网站升级改造HTTPS网址教程
    阅读
    一、获取证书 升级到 HTTPS 协议的第一步,就是要获得一张证书。阿里云上可以申请免费的 HTTPS 证书。 1. 首先登录阿里云,在“产品与服务”的下拉菜单中,找到“ CA 证书服务(数据安全)”。 2. 点击右上角“购买证书”按钮 3. “保护类型”选择“一个域名...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
织梦地区联动调用不显示第三级城市解决方法
« 上一篇 2018年10月14日
织梦如何获取图集调用第一张图片完美解决方法
下一篇 » 2018年10月12日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐织梦插件更多
织梦整合聚合数据短信验证实现查询证书功能
更新时间:2018-12-05

人已经看过了!

织梦输入密码查看文章内容支持静态动态及手机端
更新时间:2019-05-08

人已经看过了!

织梦评论二次开发带支持反对显地理位置插件
更新时间:2018-10-11

人已经看过了!

织梦ckplayer播放器插件的自适应屏幕方法
更新时间:2017-06-26

人已经看过了!

织梦dedecms会员注册手机短信验证互亿无线高级插件
更新时间:2017-09-11

人已经看过了!

织梦整合Markdown编辑器插件
更新时间:2019-10-03

人已经看过了!

织梦dedecms联动类型地区联动及省份-市级-地区分开+高亮
更新时间:2017-08-22

人已经看过了!

推荐精品模板更多
大学职业学院技术学校类织梦模板(带手机端)
更新时间:2018-04-24

人已经看过了!

网页模板/视频素材/图片分享/源码商城站长交易平台
更新时间:2017-08-10

人已经看过了!

精仿新版阿里百秀织梦自适应终端模板
更新时间:2017-08-10

人已经看过了!

营销型办公家具家居类织梦模板(带手机端)
更新时间:2018-04-17

人已经看过了!

仿魔酷阁织梦整站下载
更新时间:2017-08-19

人已经看过了!

工业机械产品通用类织梦模板(带手机端)
更新时间:2018-04-14

人已经看过了!