利用视觉差实现图片滑动
来源:互联网 发布:js json对象的长度 编辑:程序博客网 时间:2024/05/18 08:01
今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进。
ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap——panel使用了绝对定位,就将translate平移改为了left。改动后,各个浏览器运行的效果不错
html代码(没写注释)
<div class="container"> <h1>Parallax Slider</h1><div class="wrap"> <div class="bg-img"> <div id="bg_1" class="bg bg-1" style="left: 0px;"></div> <div id="bg_2" class="bg bg-2" style="left: 0px;"></div> <div id="bg_3" class="bg bg-3" style="left: 0px;"></div> </div> <div id="wrap_panel" class="wrap-panel" style="left: 0px;"><div class="panel panel-1"><img id="img_1" src="images/1.jpg"></div><div class="panel panel-2"><img src="images/2.jpg"></div><div class="panel panel-3"><img src="images/3.jpg"></div><div class="panel panel-4"><img src="images/4.jpg"></div><div class="panel panel-5"><img src="images/5.jpg"></div><div class="panel panel-6"><img src="images/6.jpg"></div> </div> <div class="navigation-button"> <span id="perv_btn" class="perv-button"></span> <span id="next_btn" class="next-button"></span> </div><div id="show_small" class="show-small"><ul><li><img src="images/thumbs/1.jpg"></li><li><img src="images/thumbs/2.jpg"></li><li><img src="images/thumbs/3.jpg"></li><li><img src="images/thumbs/4.jpg"></li><li><img src="images/thumbs/5.jpg"></li><li><img src="images/thumbs/6.jpg"></li></ul></div></div></div>
css代码(自己对应着看):
* { margin: 0; padding: 0; }html, body, .container { width: 100%; height: 100%; font-family: 'Microsoft Yahei'; }.container { background-color: #222; overflow-x: hidden; }.container h1 { font-size: 50px; color: #ccc; text-align: center; font-weight: bolder; height: 120px; line-height: 120px; }.wrap { position: relative; width: 600%; height: 400px; border-top: 10px solid #333; border-bottom: 10px solid #333; margin-top: 20px; }.bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s; }.bg-1 { background: url(images/bg1.png); }.bg-2 { background: url(images/bg2.png); }.bg-3 { background: url(images/bg3.png); }.wrap-panel { position: absolute; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.panel { width: 16.66%; height: 100%; float: left; }.panel img { display: block; margin: 0 auto; margin-top: 35px; border-radius: 10px; border: 10px solid rgba(143, 143, 143, 0.6); }.navigation-button span:hover { opacity: 0.8 }.perv-button, .next-button { position: absolute; width: 30px; height: 60px; background-color: #344133; border-radius: 10px; cursor: pointer; opacity: 0.4; }.perv-button { background: #000 url(images/prev.png) center center no-repeat; }.next-button { background: #000 url(images/next.png) center center no-repeat; }.show-small { position: absolute; width: 680px; bottom: 20px; }.show-small ul { list-style: none; }.show-small ul li { float: left; margin: 0 10px; border: 5px solid #fff; opacity: 0.7; cursor: pointer;-webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s;-o-transition: all .3s; transition: all .3s; }.show-small ul li:hover { margin-top: -15px; }
js代码(小demo):
window.onload = function() {// 得到元素var getDOM = function (id){ return typeof id==="string"?document.getElementById(id):id;}// 得到对象var img = getDOM('img_1');var prev = getDOM("perv_btn");var next = getDOM("next_btn");var wrap_panel = getDOM('wrap_panel');var bg_1 = getDOM("bg_1");var bg_2 = getDOM("bg_2");var bg_3 = getDOM("bg_3");var show_small = getDOM("show_small");var list = show_small.getElementsByTagName("li");var wwidth; // 为元素绑定事件var addEvent = function(id,event,fn) { var el = getDOM(id) || document; if(el.addEventListener){ el.addEventListener(event,fn,false); }else if(el.attachEvent){ el.attachEvent('on' + event,fn); }}function init() {// 对按钮进行定位// 向前按钮的左边距离=图片的左距离+边框prev.style.left = img.offsetLeft + 10 + 'px';// 向前按钮的上边距离=图片的上距离+图片高度的一半-按钮高度的一半prev.style.top = img.offsetTop + img.clientHeight/2 - prev.clientHeight/2 + 'px';next.style.left = img.offsetLeft + img.clientWidth + 10 - next.clientWidth + 'px';next.style.top =prev.style.top;// 对小图片的容器进行定位wwidth = document.documentElement.clientWidth || document.body.clientWidth;show_small.style.left = (wwidth - show_small.clientWidth)/2 + 'px';}// 小图片的处理function small_img() {// 对图片进行旋转处理for (var i = 0;i< list.length; i++) {// 旋转方向var direction = Math.pow(-1,parseInt(Math.random()*10));list[i].style = "transform:rotate(" + (Math.random()*20*direction) + "deg)";}list[0].style.opacity = 1;}function only_one(el,num) {for (var i = 0; i < el.length; i++) {el[i].style.opacity = 0.7;}// console.log(num);el[num].style.opacity = 1;} // 浏览器缩放时window.onresize = function() {init();}// 执行函数init();small_img();addEvent(prev,'click',function() {// 改变wrap-panel的leftvar oldPos = parseInt(wrap_panel.style.left); if(oldPos == 0) { // 背景平移 图片容器平移 bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -wwidth*(list.length-1) +'px'; // 更改对应小图片透明度 only_one(list,list.length-1); } else { // 背景平移 图片容器平移 wrap_panel.style.left = (oldPos + wwidth) +'px'; bg_1.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*100) +'px'; bg_2.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*300) +'px'; bg_3.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*500) +'px'; // 更改对应小图片透明度 only_one(list,parseInt(-(oldPos/wwidth + 1))); }});addEvent(next,'click',function() {// 改变wrap-panel的leftvar oldPos = parseInt(wrap_panel.style.left); if(oldPos == -wwidth*(list.length-1)) { // 背景平移 图片容器平移 bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = '0px'; // 更改对应小图片透明度 only_one(list,0); } else { // 背景平移 图片容器平移 wrap_panel.style.left = (oldPos - wwidth) +'px'; bg_1.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*100) +'px'; bg_2.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*300) +'px'; bg_3.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*500) +'px'; // 更改对应小图片透明度 only_one(list,parseInt(-(oldPos/wwidth - 1))); }});}
效果如下图:
0 0
- 利用视觉差实现图片滑动
- 实现图片水平滑动1(利用HorizontalScrollView)
- 利用RecyclerView实现仿陌陌滑动浏览图片
- 利用viewpager实现图片左右循环滑动效果
- jquery实现滑动图片
- 实现图片轮流滑动
- ImageSwitcher实现图片滑动
- UIScrollView实现滑动图片
- CSS实现背景图片固定滚动形成视觉差效果
- Android 利用Gradle实现差异化构建
- Android 利用Gradle实现差异化构建
- Android 利用Gradle实现差异化构建
- Android实现滑动图片(ViewPager)
- 图片如何实现滑动效果
- viewPager实现图片左右滑动
- Gallery实现横向滑动图片
- jquery实现上下滑动图片
- 滚动视觉差原理
- [Nutch]Solr配置自定义的中文分词器mmseg4j
- 友盟分享5.1步骤记录
- 冒泡法排序
- java多线程
- Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用
- 利用视觉差实现图片滑动
- 第二个爬虫:查看csdn博客阅读数
- 数据结构x实验三--串的操作
- Phoenix 导出csv文件
- 动态规划—Problem O
- Android 异步加载图像优化,如:引入线程池、引入缓存
- scale data:线性空间映射
- RMAN备份动态性能视图 V$BACKUP_CORRUPTION
- Filter过滤器及HttpServletRequestWrapper使用