广树管理员
2025-04-29 22:48
@夕阳西下：哈哈哈，是这么操作的
导航
萌即是正义！时不时分享一些ACG活动记录与有趣代码的小站！
侧边栏
攻略中
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月6天
乘坐的列车，划破夜空，飞驰在星空之下，令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中，我邂逅了随性的乘客，可人怜爱的乘务员。以及……猫耳少女？这场旅行，究竟会在她身上，留下了些什么呢？
PSN奖杯卡
【jQuery】宝贝晒图
作者：广树时间：2016-03-02 19:56:23分类：JavaScript
自己写了个类似淘宝晒图的代码，但是感觉还有些凌乱，应该还能优化。
CSS部分：
<style>
.content-img-list img {
height: 30px;
width: 45px;
vertical-align: middle;
}
.content-img-box .content-img-list {
float: left;
margin-right: 10px;
border: 2px solid #fff;
*zoom:1;
position: relative;
transition: border-color .2s ease-out;
cursor: pointer;
}
.member-discuss .content-img-box {
margin-top: 8px;
}
.content-img-box ul .tm-current {
border: 2px solid #fab900;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
cursor: pointer;
}
.tm-current .tm-photos-arrow {
filter: alpha(opacity=100);
opacity: 1;
bottom: -12px
}
.tm-photos-arrow {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: transparent 6px dashed;
border-top: 6px solid #fab900;
position: absolute;
left: 15px;
filter: alpha(opacity=0);
opacity: 0;
bottom: -8px;
background: 0 0
}
.content-img-box .img_zoom_box img {
cursor: pointer;
}
.content-img-box .img_zoom_box {
position: relative;
margin: 10px 0;
border: 1px solid #141414;
background: #fff;
padding: 2px;
overflow: hidden;
display:none;
width:0px;
height:0px;
}
.img_zoom_box .img-goleft {
width: 30%;
left: 0;
cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-prev.cur),auto;
z-index: 3;
position: absolute;
height: 100%;
top: 0;
background: fixed url(about:blank);
}
.img_zoom_box .img-goleft-ico {
background-image: url(../images/iconfont-left.png);
background-repeat: no-repeat;
background-position: center center;
}
.img_zoom_box .img-goright {
width: 30%;
right: 0;
cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-next.cur),auto;
z-index: 3;
position: absolute;
height: 100%;
top: 0;
background: fixed url(about:blank);
}
.img_zoom_box .img-goright-ico {
background-image: url(../images/iconfont-right.png);
background-repeat: no-repeat;
background-position: center center;
}
.img_zoom_box .img-gomid {
width: 100%;
left: 0;
cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/small.cur),auto;
z-index: 2;
position: absolute;
height: 100%;
top: 0;
background: fixed url(about:blank);
}
.img-go-box{
position: absolute;
height: 100%;
width: 100%;
}
.img-zoom-viewer{
position: relative;
}
.img-zoom-viewer img{
max-width:496px;
}
</style>
HTML部分：
<div class="content-img-box"> <ul> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/201602/d2da1456548019.jpg" /> <b class="tm-photos-arrow"></b> </li> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/201602/60231455544046.jpg" /> <b class="tm-photos-arrow"></b> </li> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/tpl_options/hd1.jpg" /> <b class="tm-photos-arrow"></b> </li> </ul> <div style="clear:both;"> </div> <div class="img_zoom_box"> <div class="img-zoom-viewer"> </div> <div class="img-goleft"> </div> <div class="img-gomid"> </div> <div class="img-goright"> </div> </div> </div>
JS部分：
<script language="javascript">
$(document).ready(function () {
$('.content-img-list').click(function() {
if($(this).hasClass("tm-current")){
$(this).removeClass("tm-current");
$('.img_zoom_box').stop(true, false).animate({
height:'0px',
width:'0px'
}).hide(1);
}
else{
$('.img_zoom_box').stop(true, false).animate({
height:'0px',
width:'0px'
}).hide(1);
$('.content-img-list').removeClass("tm-current");
$(".img-goleft").show();
$(".img-goright").show();
$(this).parent().parent().find('.content-img-list').removeClass("tm-current");
$(this).addClass("tm-current");
var img = $(this).find("img").clone();
var screenImage = $(this).find("img");
var theImage = new Image();
theImage.src = screenImage.attr("src");
var imageWidth = theImage.width;
var imageHeight = theImage.height;
/*判断原图是否超过指定宽度*/
if(imageWidth>496){
var imageHeight = 496/imageWidth*theImage.height;
var imageWidth = 496;
}
$(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
height:imageHeight,
width:imageWidth
});
$(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img)
var lile = $(this).parent().parent().find('.content-img-list').length;
if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
$(".img-goright").hide();
$(".img-goleft").show();
}
if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
$(".img-goleft").hide();
$(".img-goright").show();
}
if(lile <= 1){
$(".img-goleft").hide();
$(".img-goright").hide();
}
}
});
$('.img-gomid').click(function() {
$('.content-img-list').removeClass("tm-current");
$(this).parent().parent().find('.img_zoom_box').stop(true, false).animate({
height:'0px',
width:'0px'
}).hide(1);
});
$('.img-goright').click(function() {
$('.tm-current').addClass("tm-go")
var img = $('.tm-current').next(".content-img-list").find("img").clone();
var screenImage = $('.tm-current').next(".content-img-list").find("img");
var theImage = new Image();
theImage.src = screenImage.attr("src");
var imageWidth = theImage.width;
var imageHeight = theImage.height;
/*判断原图是否超过指定宽度*/
if(imageWidth>496){
var imageHeight = 496/imageWidth*theImage.height;
var imageWidth = 496;
}
$(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
height:imageHeight,
width:imageWidth
});
$(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
$('.tm-current').next(".content-img-list").addClass("tm-current").prev().removeClass("tm-current");
if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
$(".img-goright").hide();
$(".img-goleft").show();
}
else{
$(".img-goright").show();
$(".img-goleft").show();
}
});
$('.img-goleft').click(function() {
var img = $('.tm-current').prev(".content-img-list").find("img").clone();
var screenImage = $('.tm-current').prev(".content-img-list").find("img");
var theImage = new Image();
theImage.src = screenImage.attr("src");
var imageWidth = theImage.width;
var imageHeight = theImage.height;
/*判断原图是否超过指定宽度*/
if(imageWidth>496){
var imageHeight = 496/imageWidth*theImage.height;
var imageWidth = 496;
}
$(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
height:imageHeight,
width:imageWidth
});
$(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
$('.tm-current').prev(".content-img-list").addClass("tm-current").next().removeClass("tm-current");
if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
$(".img-goleft").hide();
$(".img-goright").show();
}
else{
$(".img-goright").show();
$(".img-goleft").show();
}
});
});
</script>
※本代码为原创代码，如需转载请注明出处：www.wikimoe.com。
相似内容：
博文
解决Ionic Vue生命周期钩子无法调用的问题
发表于：2021-05-23 17:03
博文
解决vue-cli（Node.js）局域网IP不行只能使用localhost或者127.0.0.1来访问
发表于：2018-06-26 15:08
博文
RPG Maker MV 插件制作入门（1）
发表于：2017-07-08 10:03
博文
【jQuery】点击菜单外围关闭菜单
发表于：2016-08-26 15:55
博文
【jQuery】给css加上!important
发表于：2016-05-06 10:01
博文
【jQuery/Zepto】手机弹窗时禁止滑动和滚动
发表于：2016-04-18 14:20
博文
【JavaScript】判断浏览器种类与版本
发表于：2016-03-14 19:07
博文
【jQuery】右下角弹出广告
发表于：2016-02-12 17:36