【原创smarty仿淘宝商品图片轮播+放大镜效果】

1、去掉图片集字段，字符串的多余字符

$goods_pic_display=$row[DISPLAY];
$goods_pic_display1=str_replace('"', '', $goods_pic_display);
$goods_pic_display2=str_replace(']', '', $goods_pic_display1);
$goods_pic_display3=str_replace('[', '', $goods_pic_display2);

2、php把字符串指定字符分割成数组

$var_display=explode(",",$goods_pic_display3);

3、foreach 循环输出一维数组，定义第一条foreach数据

<{foreach from=$var_display name=arr_display item=foo }>
<{if $smarty.foreach.arr_display.first}>
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="<{$foo}>" mid="<{$foo}>" big="<{$foo}>">
</a>
</div>
</li>
<{else}>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="<{$foo}>" mid="<{$foo}>" big="<{$foo}>">
</a>
</div>
</li>
<{/if}>
<{/foreach}>

4、放大镜插件

<!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>放大镜</title>

/* box */

.box{width:610px;margin:100px auto;}

.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}

.tb-pic a img{vertical-align:middle;}

.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}

.tb-thumb{margin:10px 0 0;overflow:hidden;}

.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}

.tb-s310, .tb-s310 a{height:310px;width:310px;}

.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}

.tb-s310 a{*font-size:271px;}

.tb-s40 a{*font-size:35px;}

.tb-s40, .tb-s40 a{height:40px;width:40px;}

.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}

.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}

.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}

.tb-thumb li div{border:1px solid #CDCDCD;}

div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}

div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}

</style>

</head>

<body>

</div>

$(".jqzoom").imagezoom();

$("#thumblist li a").click(function(){

$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");

$(".jqzoom").attr('src',$(this).find("img").attr("mid"));

$(".jqzoom").attr('rel',$(this).find("img").attr("big"));

});

});

</script>

</body>

</html>

====================

jquery.imagezoom.js

。。。。。。

(function($){

$.fn.imagezoom = function(options){

var settings = {
xzoom: 310,
yzoom: 310,
offset: 10,
position: "BTR",
preload: 1
};

if(options) {
$.extend(settings, options);
}

var noalt = '';

var self = this;

$(this).bind("mouseenter", function(ev){

var imageLeft = $(this).offset().left;//元素左边距
var imageTop = $(this).offset().top;//元素顶边距

var imageWidth = $(this).get(0).offsetWidth;//图片宽度
var imageHeight = $(this).get(0).offsetHeight;//图片高度

var boxLeft = $(this).parent().offset().left;//父框左边距
var boxTop = $(this).parent().offset().top;//父框顶边距
var boxWidth = $(this).parent().width();//父框宽度
var boxHeight = $(this).parent().height();//父框高度

noalt= $(this).attr("alt");//图片标题
var bigimage = $(this).attr("rel");//大图地址
$(this).attr("alt",'');//清空图片alt

if($("div.zoomDiv").get().length == 0){
$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div><div class='zoomMask'> </div>");//放大镜框及遮罩
}

if(settings.position == "BTR"){
//如果超过了屏幕宽度将放大镜放在右边
if(boxLeft + boxWidth + settings.offset + settings.xzoom > screen.width){
leftpos = boxLeft - settings.offset - settings.xzoom;
}else{
leftpos = boxLeft + boxWidth + settings.offset;
}
}else{
leftpos = imageLeft - settings.xzoom - settings.offset;
if(leftpos < 0){
leftpos = imageLeft + imageWidth + settings.offset;
}
}

$("div.zoomDiv").css({ top: boxTop,left: leftpos });
$("div.zoomDiv").width(settings.xzoom);
$("div.zoomDiv").height(settings.yzoom);
$("div.zoomDiv").show();

$(this).css('cursor','crosshair');

$(document.body).mousemove(function(e){

mouse = new MouseEvent(e);
if(mouse.x<imageLeft || mouse.x>imageLeft+imageWidth || mouse.y<imageTop || mouse.y>imageTop+imageHeight){
mouseOutImage();
return;
}

var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;

var scaley ='x';
var scalex ='y';

//设置遮罩层尺寸
if(isNaN(scalex)|isNaN(scaley)){
var scalex = (bigwidth/imageWidth);
var scaley = (bigheight/imageHeight);
$("div.zoomMask").width((settings.xzoom)/scalex );
$("div.zoomMask").height((settings.yzoom)/scaley);
$("div.zoomMask").css('visibility','visible');
}

xpos = mouse.x- $("div.zoomMask").width()/2 ;
ypos = mouse.y- $("div.zoomMask").height()/2 ;

xposs = mouse.x- $("div.zoomMask").width()/2 - imageLeft;
yposs = mouse.y- $("div.zoomMask").height()/2 - imageTop ;

xpos = (mouse.x - $("div.zoomMask").width()/2 < imageLeft ) ? imageLeft : (mouse.x + $("div.zoomMask").width()/2 > imageWidth + imageLeft ) ? (imageWidth + imageLeft -$("div.zoomMask").width()): xpos;
ypos = (mouse.y - $("div.zoomMask").height()/2 < imageTop ) ? imageTop : (mouse.y + $("div.zoomMask").height()/2 > imageHeight + imageTop ) ? (imageHeight + imageTop - $("div.zoomMask").height()) : ypos;

$("div.zoomMask").css({ top:ypos,left:xpos});
$("div.zoomDiv").get(0).scrollLeft = xposs * scalex;
$("div.zoomDiv").get(0).scrollTop = yposs * scaley;

});

function mouseOutImage(){
$(self).attr("alt",noalt);
$(document.body).unbind("mousemove");
$("div.zoomMask").remove();
$("div.zoomDiv").remove();
}

//预加载
count = 0;
if(settings.preload){
$('body').append("<div style='display:none;' class='jqPreload"+count+"'></div>");

$(this).each(function(){

var imagetopreload= $(this).attr("rel");

var content = jQuery('div.jqPreload'+count+'').html();

jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');

});

}

})(jQuery);

function MouseEvent(e) {
this.x = e.pageX;
this.y = e.pageY;
}

======================

jquery.imagezoom.min.js

【原创smarty仿淘宝商品图片轮播+放大镜效果】的更多相关文章

js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
仿淘宝商品详情页上拉弹出新ViewController
新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...
基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果
上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...
JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
图片轮播展示效果-2D实现
图片的轮播展示效果如果使用2D实现,需要将3D中存在的近大远小效果使用图片的缩放呈现,因此需要存储和计算图片的位置同时还要计算存储图片的缩放信息.将所有图片的位置连线看作是一个椭圆,就可以根据图片的个 ...
Android自己定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

随机推荐

Oracle笔记（十一）建表、更新、查询综合练习
有某个学生运动会比赛信息的数据库,保存了如下的表: 运动员sporter(运动员编号sporterid,运动员姓名name,运动员性别sex,所属系号department) 项目item(项目编号it ...
虚拟机不能桥接联网 vmnet0上的网桥当前未运行
win10家庭版更新到内测版后,原来可以正常桥接工作的虚拟机ubuntu不能在桥接模式下联网和ssh连接了,因为获取不到IP地址了. 上网搜索一下,发现直接粗暴的方法--修复VMware Workst ...
Django模型层：单表操作，多表操作，常用（非常用）字段和参数，Django-model进阶
一.web应用二.模板的导入与继承三.静态文件相关四.inclusion_tag:返回html片段五.模型层一.web应用 -s包括两个部分:web服务器+application -目前阶段 ...
记一次引用maven插件报错解决方法
1.报错信息如图: plugin org.springframework.boot:spring-boot-maven-plugin not found 2.解决方案: maven的配置文件[sett ...
图像处理---《Canny 边缘检测》
图像处理---<Canny 边缘检测> 很想系统的把图像处理之边缘检测部分详细的过一遍,对比一个各个算子的优良性能.时间紧,精力有限,现在只能走哪补哪,随手记. 有几个简单的场景,有需要, ...
深度排序模型概述（二）PNN/NFM/AFM
在CTR预估中,为了解决稀疏特征的问题,学者们提出了FM模型来建模特征之间的交互关系.但是FM模型只能表达特征之间两两组合之间的关系,无法建模两个特征之间深层次的关系或者说多个特征之间的交互关系,因此 ...
Linux基础使用
Linux中,日志所在的位置: /var/log/messages 系统默认的日志 /var/log/secure 记录用户的登录信息查看日志的方法有很多 :head ...
Caused by: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResourcePool@1483de4 -- timeout at awaitAvailable(
Caused by: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire ...
Appium Python核心API
adb命令模拟按键事件 :http://blog.sina.com.cn/s/blog_68f262210102vc1b.html
[Luogu] Mayan游戏
https://www.luogu.org/problemnew/show/P1312 太恶心了 #include <cstdio> #include <algorithm> ...

【原创smarty仿淘宝商品图片轮播+放大镜效果】

【原创smarty仿淘宝商品图片轮播+放大镜效果】的更多相关文章

随机推荐

热门专题