帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 产品详情页图片轮换放大效果
产品详情页图片轮换放大效果
浏览:1004次
-
评论:0次
-
发布时间:2017-12-20
Html
Css
Js
<
>
@charset "utf-8"; /* CSS Document */ html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend { margin:0; padding:0; } body { background:#FFFFFF; color:#333333; font-family:"宋体",Arial,Lucida,Verdana,Helvetica,sans-serif; font-size:12px; line-height:150%; } a:link,a:visited { color:#333333; text-decoration:none; } a:hover { color:#CC0000; text-decoration:underline; } a:active { color:#990000; } ol,ul { list-style:none outside none; } .m { margin-bottom:10px; } .m,.mt,.mc,.mb { overflow:hidden; } /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix { display:block; } /* End hide from IE Mac */ /* end of clearfix */ /*页面全局结束*/ .tab { overflow:hidden; } .tab li,.tab a,.tab-item { cursor:pointer; float:left; text-align:center; } .m,.mt,.mc,.mb { overflow:hidden; } .mt .extra { float:right; } .right-extra .mt { height:28px; line-height:28px; padding:0 10px 8px; border-top:1px solid #EED97C; background:url(../images/bg_hotsale.gif) repeat-x 0 -552px; color:#c00; } .right-extra .tab { border-bottom:2px solid #BE0000; margin-bottom:10px; } .right-extra .tab li { position:relative; height:24px; padding:3px 12px 0; background:url(../images/icon_clubs.gif) #ccc no-repeat right -150px; overflow:hidden; margin-right:3px; line-height:24px; font-size:14px; font-weight:bold; color:#c30; } .right-extra .tab span { position:absolute; left:0; top:0; z-index:1; width:10px; height:27px; background:url(../images/icon_clubs.gif) no-repeat 0 -150px; } .right-extra .tab a { float:none; color:#c30; } .right-extra .tab .curr { background-position:right -178px; color:#fff; } .right-extra .tab .curr span { background-position:0 -178px; } .right-extra .tab .curr a { color:#fff; } .right-extra .mc .extra { padding:5px 10px; border-top:1px solid #F3E6C6; } .right-extra .total { float:right; } .right-extra .total strong { color:#FF7403; } .right-extra .total a:link,.right-extra .total a:visited { color:#005aa0; } .right-extra .join a:link,.right-extra .join a:visited { color:#FF7604; } .right-extra .norecode { padding:0 10px 10px; } .right-extra .iloading { margin-bottom:10px; } /*评论列表*/ #comment .item { border:1px solid #FFFFFF; padding:8px 15px; } #comment .odd { background:none repeat scroll 0 0 #F4F9FF; border:1px solid #EDF0F1; border-radius:10px 10px 10px 10px; } #comment .user { color:#999999; text-align:right; } #comment .user span { margin-left:20px; } #comment .user .u-level { color:#088100; } #comment dl { margin-bottom:5px; overflow:hidden; } #comment dt { float:left; text-align:right; width:80px; } #comment dd { float:right; overflow:hidden; width:649px; } #comment .content { float:left; width:510px; } #comment .date-answer { color:#999999; float:right; text-align:right; width:130px; } #comment .useful { color:#999999; text-align:right; } #comment .useful a { color:#005AA0; } #comment dt b { background-image:url("../images/icon_clubs.gif"); background-repeat:no-repeat; float:left; height:13px; margin:2px 3px 0 0; width:14px; } #comment .ask b { background-position:-72px -14px; } #comment .answer { color:#D75509; } #comment .answer b { background-position:-57px -14px; } /*图片放大镜样式*/ .jqzoom { float:left; border:none; position:relative; padding:0px; cursor:pointer; margin:0px; display:block; } .zoomdiv { z-index:100; position:absolute; top:0px; left:0px; width:350px; height:350px; background:#ffffff; border:1px solid #CCCCCC; display:none; text-align:center; overflow:hidden; } .jqZoomPup { z-index:10; visibility:hidden; position:absolute; top:0px; left:0px; width:20px; height:20px; border:1px solid #aaa; background:#ffffff /*url(../images/zoom.png) 50% center no-repeat*/; opacity:0.5; -moz-opacity:0.5; -khtml-opacity:0.5; filter:alpha(Opacity=50); } /*图片小图预览列表*/ .spec-preview { width:350px; height:350px; border:1px solid #DFDFDF; } .spec-scroll { clear:both; margin-top:5px; width:352px; } .spec-scroll .prev { float:left; margin-right:4px; } .spec-scroll .next { float:right; } .spec-scroll .prev,.spec-scroll .next { display:block; font-family:"宋体"; text-align:center; width:10px; height:54px; line-height:54px; border:1px solid #CCC; background:#EBEBEB; cursor:pointer; text-decoration:none; } .spec-scroll .items { float:left; position:relative; width:322px; height:56px; overflow:hidden; } .spec-scroll .items ul { position:absolute; width:999999px; height:56px; } .spec-scroll .items ul li { float:left; width:64px; text-align:center; } .spec-scroll .items ul li img { border:1px solid #CCC; padding:2px; width:50px; height:50px; } .spec-scroll .items ul li img:hover { border:2px solid #FF6600; padding:1px; }
//==================图片详细页函数===================== //鼠标经过预览图片函数 function preview(img) { $("#preview .jqzoom img").attr("src", $(img).attr("src")); $("#preview .jqzoom img").attr("jqimg", $(img).attr("bimg")); } //图片放大镜效果 $(function() { $(".jqzoom").jqueryzoom({ xzoom: 380, yzoom: 410 }); }); //图片预览小图移动效果,页面加载时触发 $(function() { var tempLength = 0; //临时变量,当前移动的长度 var viewNum = 5; //设置每次显示图片的个数量 var moveNum = 2; //每次移动的数量 var moveTime = 300; //移动速度,毫秒 var scrollDiv = $(".spec-scroll .items ul"); //进行移动动画的容器 var scrollItems = $(".spec-scroll .items ul li"); //移动容器里的集合 var moveLength = scrollItems.eq(0).width() * moveNum; //计算每次移动的长度 var countLength = (scrollItems.length - viewNum) * scrollItems.eq(0).width(); //计算总长度,总个数*单个长度 //下一张 $(".spec-scroll .next").bind("click", function() { if (tempLength < countLength) { if ((countLength - tempLength) > moveLength) { scrollDiv.animate({ left: "-=" + moveLength + "px" }, moveTime); tempLength += moveLength; } else { scrollDiv.animate({ left: "-=" + (countLength - tempLength) + "px" }, moveTime); tempLength += (countLength - tempLength); } } }); //上一张 $(".spec-scroll .prev").bind("click", function() { if (tempLength > 0) { if (tempLength > moveLength) { scrollDiv.animate({ left: "+=" + moveLength + "px" }, moveTime); tempLength -= moveLength; } else { scrollDiv.animate({ left: "+=" + tempLength + "px" }, moveTime); tempLength = 0; } } }); }); //==================图片详细页函数=====================
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>产品详情页图片轮换放大效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery常用产品详情页图片放大效果
纯CSS选项卡效果
jQuery append方法实例演示
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1004
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值