广树
2024-11-21 16:04
@hikari：BGM也许是吧，歌曲部分感觉不一定
导航
萌即是正义！时不时分享一些ACG活动记录与有趣代码的小站！
侧边栏
正在攻略
PSN奖杯卡
【jQuery】宝贝晒图
作者：广树时间：2016-03-02 19:56:23分类：JavaScript/jQuery/Vue
自己写了个类似淘宝晒图的代码，但是感觉还有些凌乱，应该还能优化。
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在iOS中无法长按保存图片的问题
发表于：2021-05-23 16:52
博文
2D WebGL renderer Pixi.js v4 入门【第五回】
发表于：2018-08-31 15:08
博文
2D WebGL renderer Pixi.js v4 入门【第二回】
发表于：2018-08-31 11:20
博文
base64转二进制数组（ArrayBuffer） Javascript | 微信小程序
发表于：2018-03-19 14:58
博文
【Vue.js】过滤器时间戳转换成yy-mm-dd hh:mm:ss格式
发表于：2018-03-06 16:16
博文
博客通用版Live2d伊斯特瓦尔发布
发表于：2018-01-13 11:28
博文
【H5小游戏】制作一个简单的赛车游戏
发表于：2017-10-18 15:28
博文
【JavaScript】随机选号（大*透）
发表于：2017-05-26 14:23