野生前端菜鸟
2016-12-06 14:56
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>七夕言情2</title> <style type="text/css"> *{ margin:0; padding: 0; } html,body{width: 100%;height:100%;} ul,li{list-style: none} #ct{ width: 100%; height: 100%; overflow: hidden; position: absolute; } .wrap{ position: relative; } .wrap>li{ float: left; overflow: hidden; position: relative; } .a_background{ width: 100%; height: 100%; position: absolute; } .a_top{ width: 100%; height: 71.6%; background-image: url("http://img.mukewang.com/55addf6900019d8f14410645.png"); background-size: 100% 100%; } .a_middle{ width: 100%; height: 13.1%; background-image: url("http://img.mukewang.com/55addf800001ff2e14410118.png"); background-size: 100% 100%; } .a_bottom{ width: 100%; height: 15.3%; background-image: url("http://img.mukewang.com/55addfcb000189b314410138.png"); background-size: 100% 100% } .charector{ width: 151px; height: 291px; background: url("http://img.mukewang.com/55ade248000198ae10550582.png") -0px -291px no-repeat; position: absolute; left: 6%; top:55%; } button { width: 100px; height: 50px; } .button { position: absolute; bottom: 0; } .slowWalk{ -webkit-animation-name: person-slow; -webkit-animation-duration: 950ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: steps(1, start); -moz-animation-name: person-slow; -moz-animation-duration: 950ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: steps(1, start); } @-webkit-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } @-moz-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } </style> </head> <body> <div id="ct"> <ul> <li> <div> <div></div> <div></div> <div></div> </div> </li> <li>页面2</li> <li>页面3</li> </ul> <div id="boy"></div> <div> <button>点击开始动画</button> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="swipe.js"></script> <script type="text/javascript"> var swipe=Swipe($('#ct')); //获取数据 var getValue=function(className){ var $elem=$(''+className+'') // 走路的路线坐标 // 小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度 return{ height:$elem.height(), top: $elem.position().top } } // 路的Y轴 var pathY=function(){ var data=getValue('.a_middle'); return data.top+data.height /2; }(); var $boy=$('#boy'); var $boyHeight=$boy.height(); // 修正小男孩的正确位置 // 路的中间位置减去小孩的高度,25是一个修正值 // $boy.css({ // top:pathY-$boyHeight+25 // }); $('button').click(function(){ // 增加走路的CSS3关键帧规则 $boy.addClass('slowWalk'); }); </script> </body> </html>
//在swipe.js中定义一个SwipeFun方法 // /** * [Swipe description] * @param {[type]} container [页面容器节点] * @param {[type]} options [参数] */ function Swipe(container) { var ct=$('.ct');//获取容器 var el=ct.find(':first') // 获取第一个子节点 var slides=el.find('li') // li对象数组 var width=ct.width(); // 获取容器宽度 var height=ct.height();// 获取容器高度 var ct=$('.ct');//获取容器 var el=ct.find(':first') // 获取第一个子节点 var slides=el.find('li') // li对象数组 var width=ct.width(); // 获取容器宽度 var height=ct.height();// 获取容器高度 // 设置li页面总宽度,即父容器ul的宽度,高度 el.css({ width:(slides.length*width)+'px', height:height+'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide=slides.eq(index); slide.css({ height:width+'px', width:width+'px' }) }); var swipe = {}; // 监控完成与移动 swipe.scrollTo = function(x, speed) { el.css({ 'transition-timing-function':'linear', 'transition-duration':speed+'ms', 'transform':'translate3d(-'+x+'px,0px,0px)' }); //return this; }; return swipe; }
你的布局里就没导入背景图片,所以不可能有背景图
如:这样
<div class="a_background">
<div class="a_top"></div>
<div class="a_middle"></div>
<div class="a_bottom"></div>
</div>
你根据网址把图片下载下来保存到项目里,在从项目里直接引用
在线编辑器也显示不出来啊
还是不行啊,唉,在编辑器里打开就是不显示背景图,在线把代码写上去就行,问什么
H5+JS+CSS3实现七夕言情
211523 学习 · 540 问题
相似问题