这篇文章主要为大家详细介绍了 JavaScript 仿百度图片浏览效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在线地址: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="js/jquery-2.1.0.js">
- </script>
- <script src="js/data.js">
- </script>
- <script src="js/handleImage.js">
- </script>
- <script src="js/index.js">
- </script>
- </head>
- <body>
- <div class="container1">
- <div class="main1">
- <!-- 图片显示 -->
- <div class="showImg1">
- <a href="javascript:;" class="showImg1_btnLeft">
- </a>
- <a href="javascript:;" class="showImg1_btnRight">
- </a>
- <div class="imgBox1">
- <img src="" class="img1" />
- </div>
- </div>
- <!-- 图片选择 -->
- <div class="chooseImg1_box">
- <div class="navList1">
- <span class="btnImgList">
- 图片列表
- <i>
- </i>
- </span>
- <span class="btnImgScale">
- <a href="javascript:;" class="scaleAdd1">
- +
- </a>
- <b class="scale1">
- 100%
- </b>
- <a href="javascript:;" class="scaleReduce1">
- -
- </a>
- </span>
- <span class="btnImgInit1">
- 原始尺寸
- </span>
- <span class="btnImgFullScreen">
- 全屏
- </span>
- <span>
- 其他
- </span>
- <span>
- 其他
- </span>
- </div>
- <div class="boxLimit1">
- <a href="javascript:;" class="chooseImg1_btnLeft">
- </a>
- <div class="imgListBox1">
- <ul class="imgList1">
- </ul>
- </div>
- <a href="javascript:;" class="chooseImg1_btnRight">
- </a>
- </div>
- </div>
- </div>
- <div class="sider1">
- <p class="pTroTit1">
- </p>
- <p class="pTroName1">
- </p>
- </div>
- </div>
- <!-- 全屏 -->
- <div class="container2">
- <div class="chooseTimeBox">
- <select class="select">
- <option value="2">
- 2s
- </option>
- <option value="3">
- 3s
- </option>
- <option value="5">
- 5s
- </option>
- </select>
- <a href="javascript:;" class="btnStart">
- 开始
- </a>
- <a href="javascript:;" class="btnStop">
- ||
- </a>
- </div>
- <!-- main -->
- <div class="imgBox2">
- <img src="" class="img2" />
- </div>
- <a href="javascript:;" class="showImg2_btnLeft">
- </a>
- <a href="javascript:;" class="showImg2_btnRight">
- </a>
- <div class="imgListBox2">
- <ul class="imgList2">
- </ul>
- </div>
- <a href="javascript:;" class="chooseImg2_btnLeft aBtn">
- </a>
- <a href="javascript:;" class="chooseImg2_btnRight aBtn">
- </a>
- <a href="javascript:;" class="btnExitFullScreen">
- x
- </a>
- </div>
- </body>
- </html>
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 ? 10 : self.nb.nScale;
- self.nb.nScale = self.nb.nScale <= 0.1 ? 0.1 : self.nb.nScale;
- self.nb.left = self.nb.centerX - self.nb.mWidth * self.nb.nScale / 2;
- self.nb.top = self.nb.centerY - self.nb.mHeight * self.nb.nScale / 2;
- self.nb.$img.css({
- 'width': self.nb.mWidth * self.nb.nScale,
- 'height': self.nb.mHeight * self.nb.nScale,
- 'left': self.nb.left,
- 'top': self.nb.top
- });
- callback && callback();
- },
- //对外提供,获取缩放比例
- getScale: function() {
- return this.nb.nScale;
- },
- imgMouseEvent: function() {
- var self = this;
- var sX, sY, disX, disY, sImgX, sImgY, b;
- self.nb.$img.on('mousedown',
- function(e) {
- b = true;
- sX = e.pageX;
- sY = e.pageY;
- sImgX = self.nb.left;
- sImgY = self.nb.top;
- });
- $(document).on('mousemove',
- function(e) {
- if (!b) return;
- self.nb.$img.css({
- 'left': sImgX + e.pageX - sX,
- 'top': sImgY + e.pageY - sY
- });
- return false;
- });
- $(document).on('mouseup',
- function() {
- b = false;
- self.nb.left = parseInt(self.nb.$img.css('left'));
- self.nb.top = parseInt(self.nb.$img.css('top'));
- self.setCenter();
- });
- }
- }; HandleImage.prototype = proto; window.HandleImage = HandleImage;
- })(window, jQuery);
index.js
- $(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 ? 0 : le;
- var maxLe = (boxWidth1 - $imgList1.width()) + 10;
- le = le < maxLe ? maxLe: le;
- $imgList1.css({
- 'left': le
- })
- },
- scaleEvent: function() {
- var timer = null;
- var btnPos = {
- x: null,
- y: null
- };
- var fnCallback = function() {
- imgListEvent.setScaleText();
- };
- $('.scaleAdd1').on('mousedown',
- function(e) {
- h1.setScale('plus', fnCallback);
- checkBtnPos(e);
- timer = setTimeout(function() {
- fnAnimate('plus');
- },
- 500);
- });
- $('.scaleReduce1').on('mousedown',
- function(e) {
- h1.setScale('reduce', fnCallback);
- checkBtnPos(e);
- timer = setTimeout(function() {
- fnAnimate('reduce');
- },
- 500);
- });
- $('.scaleAdd1').add($('.scaleReduce1')).on('mouseup',
- function() {
- clearInterval(timer);
- return false;
- });
- $('.scaleAdd1').add($('.scaleReduce1')).on('mousemove',
- function(e) {
- if (Math.abs(e.pageX - btnPos.x) >= 5 || Math.abs(e.pageY - btnPos.y) >= 5) {
- clearInterval(timer);
- };
- return false;
- });
- function checkBtnPos(e) {
- btnPos.x = e.pageX;
- btnPos.y = e.pageY;
- };
- function fnAnimate(str) {
- if (str == 'plus') {
- timer = setInterval(function() {
- h1.setScale('plus', fnCallback);
- },
- 30);
- } else if (str == 'reduce') {
- timer = setInterval(function() {
- h1.setScale('reduce', fnCallback);
- },
- 30)
- };
- };
- },
- mouseWheelEvent: function() {
- var imgBox1 = $imgBox1.get(0);
- if (document.attachEvent) {
- imgBox1.attachEvent('onmousewheel', move)
- };
- if (document.addEventListener) {
- imgBox1.addEventListener('mousewheel', move, false);
- imgBox1.addEventListener('mousewheel', move, false);
- };
- var fnCallback = function() {
- imgListEvent.setScaleText();
- };
- function move(e) {
- var up = true;
- if (e.wheelDelta) {
- up = e.wheelDelta > 0 ? true: false;
- };
- if (e.detail) {
- up = e.detail < 0 ? true: false;
- };
- if (up) {
- h1.setScale('plus', fnCallback);
- } else {
- h1.setScale('reduce', fnCallback);
- };
- if (e.preventDefault) {
- e.preventDefault();
- } else {
- e.returnValue = false;
- }
- };
- },
- setScaleText: function() {
- var scale = Math.round(h1.getScale() * 100);
- $scale1.text(scale + '%');
- },
- fnClick: function() {
- $showImg1_btnRight.on('click',
- function() {
- $liActive_1.next().trigger('click');
- });
- $showImg1_btnLeft.on('click',
- function() {
- $liActive_1.prev().trigger('click');
- });
- $chooseImg1_btnLeft.on('click',
- function() {
- var w = $imgListBox1.width();
- var le = parseInt($imgList1.css('left')) + w;
- if (le > 0) le = 0;
- $imgList1.css({
- 'left': le
- })
- });
- $chooseImg1_btnRight.on('click',
- function() {
- var w = $imgListBox1.width();
- var minLe = w - $imgList1.width();
- var le = parseInt($imgList1.css('left')) - w;
- if (le < minLe) le = minLe;
- $imgList1.css({
- 'left': le
- })
- });
- $btnImgInit1.on('click',
- function() {
- handle.setImg1(imgData[index]['src'], true);
- });
- $btnImgFullScreen.on('click',
- function() {
- fullScreen.enterFull();
- });
- }
- };
- imgListEvent.init();
- /*
- * container2
- */
- var $liActive_2;
- var timer2;
- function setImg2(src) {
- $imgBox2;
- $img2;
- var bW, bH, mW, mH;
- var img = new Image();
- $img2.attr('src', src);
- img.onload = function() {
- mW = img.width;
- mH = img.height;
- bW = $imgBox2.width();
- bH = $imgBox2.height();
- setPosition();
- };
- img.src = src;
- function setPosition() {
- var sScale = Math.min(bW / mW, bH / mH);
- if (sScale >= 1) {
- $img2.css({
- 'width': mW,
- 'height': mH,
- 'left': (bW - mW) / 2,
- 'top': (bH - mH) / 2
- });
- } else {
- $img2.css({
- 'width': mW * sScale,
- 'height': mH * sScale,
- 'left': (bW - mW * sScale) / 2,
- 'top': (bH - mH * sScale) / 2
- });
- };
- };
- };
- var fullScreen = {
- init: function() {
- this.addImg();
- this.addClick();
- },
- addImg: function() {
- var str = ''
- for (var i = 0; i < imgData.length; i++) {
- var tmp = imgData[i];
- str += '<li style="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 ? 0 : le;
- var maxLe = (boxWidth2 - $imgList2.width());
- le = le < maxLe ? maxLe: le;
- $imgList2.css({
- 'left': le
- });
- },
- enterFull: function() {
- var self = this;
- enterFullscreen();
- $con1.css('opacity', '0');
- $con2.show();
- setTimeout(function() {
- $imgList2.find('li').eq(index).trigger('click');
- },
- 500);
- //esc keyCode:27
- $(document).on('keyup.a',
- function(e) {
- if (e.keyCode == 27) {
- self.exitFull();
- };
- });
- },
- exitFull: function() {
- clearInterval(timer2);
- $(document).off('keyup.a');
- $con1.css('opacity', '1');
- $con2.hide();
- animateEvent.showStart();
- setTimeout(function() { < span style = "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();
- }
- }
- });
来源: http://www.phperz.com/article/17/0608/330265.html