JavaScript仿百度图片浏览效果
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
本文实例为大家分享了js图片浏览效果的具体代码，供大家参考，具体内容如下
在线地址：http://www.hui12.com/nbin/demo/imgskim/index.html
https://nbin2008.github.io/demo/imgskim/index.html
效果图：
index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿百度图片浏览</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="/UploadFiles/2021-04-02/jquery-2.1.0.js">
css
/* common */
*{
margin: 0; padding: 0;
}
body,html{
font-family: "微软雅黑"; font-size: 12px; overflow: hidden;
}
li{
list-style: none;
}
a{
text-decoration: none; color: #000;
}
.btnIco{
background: url(../images/btn.png);
}
b{
font-weight: normal;
}
i{
font-style: normal;
}
/* container1 */
.container1{
width: 100%; height: 100%; background-color: #f6f6f6; position: absolute; min-width: 1000px; min-height: 400px; -display: none;
}
.main1{
position: absolute; width: calc(100% - 310px); height: calc(100% - 5px); left: 0; top: 5px; background-color: #fff;
}
.sider1{
position: absolute; width: 300px; margin-left: 10px; height: calc(100% - 5px); overflow-x: hidden; overflow-y: auto; top: 5px; right: 0px; background-color: #fff;
}
.showImg1{
width: 100%; position: relative;
}
.showImg1 a{
position: absolute; width: 70px; height: 100%; top: 0; background-color: #fff; transition: all 0.5s;
}
.showImg1 a:hover{
background-color: #e6e6e6;
}
.showImg1 a:before{
content: ''; display: block; position: absolute; width: 40px; height: 72px; background: url(../images/btn.png); left: calc(50% - 20px); top: calc(50% - 31px);
}
.showImg1 .showImg1_btnLeft{
left: 0;
}
.showImg1 .showImg1_btnRight{
right: 0;
}
.showImg1 .showImg1_btnLeft:before{
background-position: 0 -87px;
}
.showImg1 .showImg1_btnLeft:hover:before{
background-position: -46px -87px;
}
.showImg1 .showImg1_btnRight:before{
background-position: 0 0;
}
.showImg1 .showImg1_btnRight:hover:before{
background-position: -46px 0;
}
.showImg1 .imgBox1{
position: absolute; width: calc(100% - 144px); height: calc(100% - 4px); left: 72px; top: 2px; overflow: hidden;
}
.showImg1 .imgBox1 .img1{
position: absolute; display: block;
}
.chooseImg1_box{
position: relative; overflow: hidden;
}
.navList1{
height: 38px; line-height: 38px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: center; font-size: 14px;
}
.navList1 span{
margin-left: -3px;
}
.navList1 span, .navList1 a{
display: inline-block; color: #666; padding: 0 10px; cursor: pointer; position: relative;
}
.navList1 span:before{
content: '|'; display: block; position: absolute; left: -3px; color: #e3e3e3;
}
.navList1 span:hover:before{
display: none;
}
.navList1 span:last-child:after{
content: '|'; display: block; position: absolute; right: 1px; color: #e3e3e3;
}
.navList1 span:hover, .navList1 a:hover{
background-color: #e3e3e3;
}
.navList1 .btnImgScale, .navList1 .btnImgScale:hover{
cursor: default; background-color: #fff; padding: 0;
}
.navList1 a{
padding: 0; width: 30px;
}
.boxLimit1{
position: relative; width: 100%; height: 100px
}
.boxLimit1 a{
float: left; display: block; width: 25px; height: 70px; margin: 15px 2px 0; position: relative;
}
.boxLimit1 a:hover{
background-color: #e6e6e6;
}
.boxLimit1 a.disable{
background-color: #fff;
}
.boxLimit1 a:before{
content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.boxLimit1 .chooseImg1_btnLeft:before, .boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
background-position: -27px -174px;
}
.boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
cursor: default;
}
.boxLimit1 .chooseImg1_btnLeft:hover:before{
background-position: -73px -174px;
}
.boxLimit1 .chooseImg1_btnRight:before, .boxLimit1 .chooseImg1_btnRight.disable:hover:before{
background-position: 0 -174px;
}
.boxLimit1 .chooseImg1_btnRight.disable:hover:before{
cursor: default;
}
.boxLimit1 .chooseImg1_btnRight:hover:before{
background-position: -46px -174px;
}
.imgListBox1{
position: relative; width: calc(100% - 58px); height: 90px; padding: 4px 0 6px; float: left; overflow: hidden;
}
.imgListBox1 .imgList1{
padding-top: 5px; position: absolute; left: 0; top: 0; transition: left 0.5s; float: left;
}
.imgListBox1 .imgList1 li{
float: left; width: 68px; height: 68px; border: 1px solid #dfdfdf; margin-top: 10px; margin-right: 10px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgListBox1 .imgList1 li.active{
width: 76px; height: 76px; border: 2px solid #3388fb; margin-top: 5px; background-image: url(../images/a1.jpg);
}
/* 全屏 */
.container2{
width: 100%; height: 100%; background-color: #262626; position: absolute; display: none;
}
.btnExitFullScreen{
color: #989898; position: absolute; top: 1%; right: 1%; font-size: 20px; line-height: 20px;
}
.chooseTimeBox{
position: absolute; width: 70px; text-align: center; height: 20px; line-height: 20px; background-color: #3d3d3d; left: calc(50% - 35px); top: 1.5%;
}
.chooseTimeBox *{
color: #e1e1e1;
}
.chooseTimeBox .select{
background: #121212; color: #999999; width: 40px; height: 18px; left: 2px; top:1px; outline: none; display: none; float: left; position: relative; top: 1px;
}
.chooseTimeBox .btnStart{
-display: none;
}
.chooseTimeBox .btnStop{
display: none; position: relative; top: -1px;
}
.imgBox2{
position: absolute; width: 70%; height: calc(90% - 144px); -border: 1px solid red; left: 15%; top: 8%;
}
.imgBox2 img{
position: absolute;
}
.showImg2_btnLeft, .showImg2_btnRight{
width: 50%; height: calc(90% - 144px); position: absolute; top: 8%; -border: 1px solid #fff;
}
.showImg2_btnLeft{
left: 0; cursor: url(../images/cur_left.jpg),auto;;
}
.showImg2_btnRight{
right: 0; cursor: url(../images/cur_right.jpg),auto;;
}
.imgListBox2{
position: absolute; width: 80%; height: 140px; border: 1px solid #3e3e3e; left: 10%; bottom: 2%; overflow: hidden;
}
.imgList2{
position: absolute; left: 0; top: 0; width: 100%; height: 110px; top: 15px; transition: left 0.5s;
}
.imgList2 li{
width: 110px; height: 110px; box-sizing: border-box; border: 1px solid #707070; float: left; margin-right: 5px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgList2 li.active{
border: 2px solid #2f95d5;
}
.container2 .aBtn{
position: absolute; display: block; width: 25px; height: 70px; margin: 15px 2px 0;
}
.container2 .aBtn:hover{
background-color: #e6e6e6;
}
.container2 .aBtn.disable{
background-color: #fff;
}
.container2 .aBtn:before{
content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.container2 .chooseImg2_btnLeft{
left: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnRight{
right: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnLeft:before, .container2 .chooseImg2_btnLeft.disable:hover:before{
background-position: -27px -174px;
}
.container2 .chooseImg2_btnLeft.disable:hover:before{
cursor: default;
}
.container2 .chooseImg2_btnLeft:hover:before{
background-position: -73px -174px;
}
.container2 .chooseImg2_btnRight:before, .container2 .chooseImg2_btnRight.disable:hover:before{
background-position: 0 -174px;
}
.container2 .chooseImg2_btnRight.disable:hover:before{
cursor: default;
}
.container2 .chooseImg2_btnRight:hover:before{
background-position: -46px -174px;
}
data.js
var imgData = [
{
src: 'images/a1.jpg',
title: 'a1.jpg',
name: '火影忍着1'
},
{
src: 'images/a2.jpg',
title: 'a2.jpg',
name: '火影忍着3'
},
{
src: 'images/a3.jpg',
title: 'a3.jpg',
name: '火影忍着3'
},
{
src: 'images/a4.jpg',
title: 'a4.jpg',
name: '火影忍着4'
},
{
src: 'images/a5.jpg',
title: 'a5.jpg',
name: '火影忍着5'
},
{
src: 'images/a6.jpg',
title: 'a6.jpg',
name: '火影忍着6'
},
{
src: 'images/a7.jpg',
title: 'a7.jpg',
name: '火影忍着7'
},
{
src: 'images/a8.jpg',
title: 'a8.jpg',
name: '火影忍着8'
},
{
src: 'images/a9.jpg',
title: 'a9.jpg',
name: '火影忍着9'
},
{
src: 'images/a10.jpg',
title: 'a10.jpg',
name: '火影忍着10'
},
{
src: 'images/a11.jpg',
title: 'a11.jpg',
name: '火影忍着11'
},
{
src: 'images/a12.jpg',
title: 'a12.jpg',
name: '火影忍着12'
},
{
src: 'images/a13.jpg',
title: 'a13.jpg',
name: '火影忍着13'
},
{
src: 'images/a14.jpg',
title: 'a14.jpg',
name: '火影忍着14'
},
{
src: 'images/a15.jpg',
title: 'a15.jpg',
name: '火影忍着15'
},
{
src: 'images/a16.jpg',
title: 'a16.jpg',
name: '火影忍着16'
},
{
src: 'images/a17.jpg',
title: 'a17.jpg',
name: '火影忍着17'
},
{
src: 'images/a18.jpg',
title: 'a18.jpg',
name: '火影忍着18'
},
{
src: 'images/a19.jpg',
title: 'a19.jpg',
name: '火影忍着19'
},
{
src: 'images/a20.jpg',
title: 'a20.jpg',
name: '火影忍着20'
}
];
handleImage.js
(function(window,$){
function HandleImage(e){
this.init(e);
};
var proto = {
init: function(e){
this.nb = {};
this.nb.$box = e.box;
this.nb.$img = e.img;
this.setBoxWH();
this.imgMouseEvent();
},
//对外提供，重置盒子的宽高，resize事件需要调用
setBoxWH: function(){
this.nb.bWidth = this.nb.$box.width();
this.nb.bHeight = this.nb.$box.height();
},
getImgWH: function(src,isNormal,callback){
var self = this;
var img = new Image();
img.onload = function(){
self.nb.mWidth = img.width;
self.nb.mHeight = img.height;
self.setStartPosition(isNormal);
callback && callback();
};
img.src = src;
},
//对外提供，输入图片地址,isNormal：true（初始不缩放）
setImg: function(src,isNormal,callback){
this.getImgWH(src,isNormal,callback);
this.nb.$img.attr('src',src);
},
//初始化图片位置
setStartPosition: function(isNormal){
var self = this;
var bW = self.nb.bWidth = self.nb.$box.width();
<span style="white-space:pre"> </span>bH = self.nb.bHeight = self.nb.$box.height();
mW = self.nb.mWidth,
mH = self.nb.mHeight;
var sScale = self.nb.nScale = Math.min(bW/mW,bH/mH);
if( sScale>=1 || isNormal ){
self.nb.nScale = 1;
self.nb.left = (bW-mW)/2;
self.nb.top = (bH-mH)/2;
self.nb.$img.css({
'width': mW,
'height': mH,
'left': (bW-mW)/2,
'top': (bH-mH)/2
})
}else{
self.nb.left = (bW-mW*sScale)/2;
self.nb.top = (bH-mH*sScale)/2;
self.nb.$img.css({
'width': mW*sScale,
'height': mH*sScale,
'left': (bW-mW*sScale)/2,
'top': (bH-mH*sScale)/2
})
};
this.setCenter();
},
setCenter: function(){
var self = this;
this.nb.centerX = self.nb.left + self.nb.mWidth*self.nb.nScale/2;
this.nb.centerY = self.nb.top + self.nb.mHeight*self.nb.nScale/2;
},
//对外提供，改变图片大小
setScale: function(str,callback){
var self = this;
if( str == 'plus'){
self.nb.nScale += 0.1;
}else if( str == 'reduce' ){
self.nb.nScale -= 0.1;
};
self.nb.nScale = self.nb.nScale>=10"htmlcode">
$(document).ready(function(){
var $win = $(window),
$con1 = $('.container1'),
$main1 = $('.main1'),
$showImg1 = $('.showImg1'),
$showImg1_btnLeft = $('.showImg1_btnLeft'),
$showImg1_btnRight = $('.showImg1_btnRight'),
$imgBox1 = $('.imgBox1'),
$img1 = $('.img1'),
$showImg1_btnLeft = $('.showImg1_btnLeft'),
$showImg1_btnRight = $('.showImg1_btnRight'),
$chooseImg1_btnLeft = $('.chooseImg1_btnLeft'),
$chooseImg1_btnRight = $('.chooseImg1_btnRight'),
$chooseImg1_box = $('.chooseImg1_box'),
$scale1 = $('.scale1'),
$btnImgInit1 = $('.btnImgInit1'),
$btnImgFullScreen = $('.btnImgFullScreen'),
$sider1 = $('.sider1'),
$imgListBox1 = $('.imgListBox1'),
$imgList1 = $('.imgList1');
//container2-fullscreen对象
var $con2 = $('.container2'),
$select = $('.select'),
$btnStart = $('.btnStart'),
$btnStop = $('.btnStop'),
$btnExitFullScreen = $('.btnExitFullScreen'),
$imgBox2 = $('.imgBox2'),
$img2 = $('.img2'),
$showImg2_btnLeft = $('.showImg2_btnLeft'),
$showImg2_btnRight = $('.showImg2_btnRight'),
$chooseImg2_btnLeft = $('.chooseImg2_btnLeft'),
$chooseImg2_btnRight = $('.chooseImg2_btnRight'),
$imgListBox2 = $('.imgListBox2'),
$imgList2 = $('.imgList2');
var winW = $win.width(),
winH = $win.height();
//图片处理事件
var h1;
var handle = {
init1: function(){
h1 = new HandleImage({
box: $imgBox1,
img: $img1
});
},
setImg1: function(src,isNormal){
h1.setImg(src,isNormal,function(){
imgListEvent.setScaleText();
});
}
};
//窗口改变事件
var envFunc = {
fnSize: function(){
$(window).on('resize',function(){
winW = $win.width(),
winH = $win.height();
containEvent.setCon();
containEvent.setShowImg1_height();
imgListEvent.imgList1_position();
h1.setBoxWH();
});
}
};
envFunc.fnSize();
//cantanier事件
var containEvent = {
init: function(){
this.setCon();
this.setShowImg1_height();
handle.init1();
},
//设置container宽高
setCon: function(){
$con1.css({
'width': winW,
'height': winH
});
$con2.css({
'width': winW,
'height': winH
});
},
//设置图片控制区高
setShowImg1_height: function(){
$showImg1.css({
'height': $main1.height() - $chooseImg1_box.height()
})
},
showText: function(data){
$('.pTroTit1').text(data['src']);
$('.pTroName1').text(data['title']);
}
};
containEvent.init();
//图片选择 普通的width：70+10, 选中active：80+10
var $liActive_1;
var index = 0;
var imgListEvent = {
init: function(){
this.imgList1_add();
this.imgList1_click();
this.scaleEvent();
this.mouseWheelEvent();
this.fnClick();
},
imgList1_add: function(){
var str = ''
for( var i=0; i<imgData.length; i++ ){
var tmp = imgData[i];
str += '<li style="background-image:url('+ tmp.src +')" ></li>'
};
$imgList1.append(str);
$imgList1.css({
'width': (70+10)*imgData.length + 10
});
},
imgList1_click: function(){
var self = this;
$imgList1.find('li').on('click',function(){
if( $liActive_1 ) $liActive_1.removeClass('active');
index = $(this).index();
$(this).addClass('active');
$liActive_1 = $(this);
self.imgList1_position();
handle.setImg1( imgData[index]['src'] );
containEvent.showText( imgData[index] );
});
$imgList1.find('li').eq(0).trigger('click');
},
imgList1_position: function(){
var boxWidth1 = $imgListBox1.width();
var le = (boxWidth1/2 - index*80);
le = Math.floor(le/80)*80;
le = le>=0"background-image:url('+ tmp.src +')" ></li>'
};
$imgList2.append(str);
$imgList2.css({
'width': 115*imgData.length
});
},
addClick: function(){
var self = this;
$imgList2.find('li').on('click',function(){
if( $liActive_2 ) $liActive_2.removeClass('active');
index = $(this).index();
$(this).addClass('active');
$liActive_2 = $(this);
self.imgList2_position();
setImg2( imgData[index]['src'] );
});
$showImg2_btnRight.on('click',function(){
$liActive_2.next().trigger('click');
});
$showImg2_btnLeft.on('click',function(){
$liActive_2.prev().trigger('click');
});
$chooseImg2_btnLeft.on('click',function(){
var w = $imgListBox2.width();
var le = parseInt($imgList2.css('left')) + w;
if( le > 0 ) le = 0;
$imgList2.css({
'left': le
})
});
$chooseImg2_btnRight.on('click',function(){
var w = $imgListBox2.width();
var minLe = w - $imgList2.width();
var le = parseInt($imgList2.css('left')) - w;
if( le < minLe ) le = minLe;
$imgList2.css({
'left': le
})
});
$btnExitFullScreen.on('click',function(){
self.exitFull();
});
},
imgList2_position: function(){
var boxWidth2 = $imgListBox2.width();
var le = (boxWidth2/2 - index*115);
le = Math.floor(le/115)*115;
le = le>=0"white-space:pre"> </span>$imgList1.find('li').eq(index).trigger('click');
<span style="white-space:pre"> </span>},500);
exitFullscreen();
}
};
fullScreen.init();
// fullScreen.enterFull();
//定时器
var animateEvent = {
init: function(){
var self = this;
$btnStart.on('click',function(){
self.start();
});
$btnStop.on('click',function(){
self.stop();
});
$select.on('change',function(){
self.start();
});
},
start: function(){
this.showStop();
var intervalTime = parseInt($select.val())*1000;
clearInterval(timer2);
timer2 = setInterval(function(){
$liActive_2.next().trigger('click');
},intervalTime);
},
stop: function(){
clearInterval(timer2);
this.showStart();
},
showStart: function(){
clearInterval(timer2);
$select.show().val('2');
$select.hide();
$btnStop.hide();
$btnStart.show();
},
showStop: function(){
$btnStart.hide();
$btnStop.show();
$select.show();
}
};
animateEvent.init();
/*
* 全屏事件
*/
// 判断各种浏览器
function enterFullscreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 判断浏览器种类
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Asp.Net之JS生成分页条的方法
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？