前言:
最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换;
鼠标移开头像图片,图片变回原来的大小
注:下图是我根据上面需求已经实现的效果,所以截图方便说明
思考:
然后我就想偷懒,直接去网上搜一个这样的效果,但搜了很久也没搜到,并且也不知道这个效果叫什么名字
后来仔细想想,这跟轮播不是很相似吗?只是把切换的小圆点和左右箭头换成了图片而已
以前偶然看到过某网站有类似的效果,我想应该也是用轮播改的,然后就想到结合用swiper轮播插件来实现这个效果
注:如果是在PC端上使用,并且要兼容i8及以上,要使用swiper2.0,swiper3.0开始就不支持PC端了
之前写过一篇博客简单介绍了各版本间的区别:https://www.cnblogs.com/tu-0718/p/9880272.html
问题:
在其它主流浏览器上都没有问题,但是在ie上,轮播图片和用来触发轮播切换的头像图片都无法显示,如下图
另我费解的是,我以为ie8才有这个问题,结果ie11也是这样。于是做了以下尝试
①:检查图片路径是否正确
②:检查引用的css,js路径是否正确
③:检查代码是否有编写错误,比如单词拼写错误
④:把CDN引用换成本地css,和js(我之前引用的是CDN,担心是不是ie不支持CDN)
⑤:把引入的 jquery和swiper js文件换成低版本的
⑥:把swiper 2.0官网的示例代码下载下来进行对比
⑦:检查IE浏览器是否是最新版本,有无更新
本以为通过上面的方式能够找到解决方法,然而全部宣告失败(当时我的内心是崩溃的,一万头羊驼狂奔而过)
解决:
最后,实在想不出到底是什么原因所致,正在抓狂的我,突然有一个念头一闪而过,
会不会是我这个电脑本身的ie浏览器有问题,后来我回家用自己的台式电脑试了一下,
没有任何问题,i8都能够正常显示,这下问题迎刃而解(我的天,不带这么坑的啊)
注:公司的电脑是win10,家里的电脑是win8,我觉得跟系统应该没什么关系
下面附上我的demo,为了方便大家测试,引入的文件都是CDN,只需要把图片和图片路径换一下就行了(业界良心啊23333)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.css" /> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .device { position: relative; width: 640px; height: 300px; padding: 30px 80px; border-radius: 20px; background: #111; border: 3px solid white; margin: 5px auto; box-shadow: 0px 0px 5px #000; } .device .arrow-left { background: url(img/arrows.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; } .device .arrow-right { background: url(img/arrows.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; } .swiper-container { height: 300px; width: 640px; } .content-slide { padding: 20px; color: #fff; } .title { font-size: 24px; margin-bottom: 10px; } .pagination { position: absolute; left: 0; text-align: center; bottom: -250px; z-index: 999; width: 100%; } .pagination img { width: 150px; height: 150px; border-radius: 50%; margin: 0 20px; } .pagination-mouseover { -webkit-transform: scale(1.5); -webkit-transition: .5s; -moz-transform: scale(1.5); -moz-transition: .5s; -ms-transform: scale(1.5); -ms-transition: .5s; transform: scale(1.5); transition: .5s; } .pagination-mouseout { -webkit-transform: scale(1); -webkit-transition: .5s; -moz-transform: scale(1); -moz-transition: .5s; -ms-transform: scale(1); -ms-transition: .5s; transform: scale(1); transition: .5s; } </style> </head> <body> <div class="device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/slider1-1.png"> </div> <div class="swiper-slide"> <img src="img/slider1-2.png"> </div> <div class="swiper-slide"> <div class="content-slide"> <p class="title">Slide with HTML</p> <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> </div> </div> <div class="swiper-slide"> <div class="content-slide"> <p class="title">Slide with CSS</p> <p>You can put any CSS inside of slide with any layout, not only images, even another Swiper!</p> </div> </div> </div> </div> <div class="pagination"> <img src="img/1.png" /> <img src="img/2.png" /> <img src="img/3.png" /> <img src="img/4.png" /> </div> </div> <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.js"></script> <script> var mySwiper = new Swiper('.swiper-container', { loop: true, // 开启无缝滚动 grabCursor: true, // 鼠标覆盖Swiper时指针会变成抓手形状 paginationClickable: true }) // 左右箭头切换 $('.arrow-left').on('click', function(e) { e.preventDefault(); mySwiper.swipeNext(); }) $('.arrow-right').on('click', function(e) { e.preventDefault(); mySwiper.swipePrev(); }) // 鼠标移入移出 $('.pagination img').on('mouseover', function(e) { $('.pagination img').removeClass('pagination-mouseover'); $(this).addClass('pagination-mouseover'); mySwiper.swipeNext(); //$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"}); }) $('.pagination img').on('mouseout', function(e) { $('.pagination img').removeClass('pagination-mouseout'); $(this).addClass('pagination-mouseout'); //$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"}); }) </script> </body> </html>