个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客
以下内容若有问题烦请即时告知我予以修改，以免误导更多人。
本次内容：仿jiaThis分享到、幻灯片、手风琴、多图片中心展开
1. 仿jiaThis分享到
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#box {
position: absolute;
right: -140px;
top: 50%;
margin-top: -75px;
padding: 20px;
width: 100px;
height: 150px;
background: rgba(0, 0, 0, .1);
color: #fff;
font-size: 20px;
}
#box span {
position: absolute;
left: -20px;
width: 20px;
height: 60px;
line-height: 20px;
background: #fe0;
color: #fff;
font-size: 12px;
text-align: center;
}
</style>
<div id="box">
<span>分享到</span>
<p>QQ</p>
<p>WeChat</p>
<p>sina</p>
</div>
<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById('box');
var oSpan = oBox.children[0];
oBox.onmouseover = function() {
move(oBox, {right: 0}, {duration: 300});
}
oBox.onmouseout = function() {
move(oBox, {right: -140}, {duration: 300});
}
}
</script>
效果示例
move框架应用 - 仿jiaThis分享到
2. 幻灯片
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
margin: 50px auto;
width: 400px;
height: 300px;
overflow: hidden;
}
ul {
position: absolute;
top: 0;
left: 0;
width: 1200px;
height: 250px;
}
ul li {
width: 400px;
height: 250px;
float: left;
list-style: none;
}
ul li img {
width: 100%;
height: 100%;
}
ol {
position: absolute;
left: 50%;
bottom: 50px;
margin-left: -45px;
}
ol li {
margin: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #fff;
font-size: 8px;
text-align: center;
line-height: 10px;
color: #fff;
cursor: pointer;
}
ol li.active {
background: #ccc;
}
</style>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
window.onload = function() {
var oBox = document.body.children[0];
var oUl = oBox.children[0];
var oOl = oBox.children[1];
var aLi = oUl.children;
var aLi2 = oOl.children;
for(var i = 0; i < aLi2.length; i++) {
aLi2[i].index = i;
(function(index) {
aLi2[i].onmouseover = function() {
for(var i = 0; i < aLi2.length; i++) {
aLi2[i].className = '';
}
this.className = 'active';
move(oUl, {marginLeft: - this.index * aLi[0].offsetWidth}, {duration: 500});
}
})(i);
}
}
</script>
效果示例
move框架应用 - 幻灯片
3. 手风琴
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
margin: 50px auto;
width: 380px;
height: 200px;
overflow: hidden;
}
#box ul {
width: 380px;
height: 200px;
}
#box ul li {
position: absolute;
list-style: none;
width: 380px;
height: 200px;
}
#box ul li img{
width: 100%;
height: 100%;
}
</style>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
window.onload = function() {
var oBox = document.body.children[0];
var oUl = oBox.children[0];
var aLi = oUl.children;
var w = 30;
for(var i = 1; i < aLi.length; i++) {
aLi[i].style.left = oBox.offsetWidth - (aLi.length - i) * w + 'px';
}
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
if(i <= this.index) {
move(aLi[i], {left: i * w}); // 小于当前位置往右推
} else {
move(aLi[i], {left: oBox.offsetWidth - (aLi.length - i) * w}); // 大于当前位置往左推
}
}
}
}
}
</script>
效果示例
move框架应用 - 手风琴
4. 多图片展开
这个示例是有问题的，展开的z-index没有调整好，在此求解！
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
margin: 50px auto;
width: 660px;
}
#box ul {
width: 660px;
}
#box ul li {
float: left;
list-style: none;
margin: 10px;
width: 200px;
height: 100px;
}
#box ul li img {
width: 100%;
height: 100%;
}
</style>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
window.onload = function() {
var oBox = document.body.children[0];
var oUl = oBox.children[0];
var aLi = oUl.children;
var bSin = false;
var aPos = [];
for(var i = 0; i < aLi.length; i++) {
aPos[i] = {
left: aLi[i].offsetLeft,
top: aLi[i].offsetTop
}
}
//浮动定位 -> 绝对定位
for(var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.left = aPos[i].left + 'px';
aLi[i].style.top = aPos[i].top + 'px';
aLi[i].style.margin = 0;
}
//移上中心放大动画
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
if(bSin) return;
bSin = true;
for(var i = 0; i < aLi.length; i++) {
aLi[i].style.zIndex = 0;
}
move(this, {
width: 600,
height: 300,
left: 30,
top: 30
});
this.style.zIndex = 1;
}
aLi[i].onmouseout = function() {
move(this, {
width: 200,
height: 100,
left: aPos[this.index].left,
top: aPos[this.index].top
});
bSin = false;
// this.style.zIndex = 0;
}
}
}
</script>
这个示例是有问题的，展开的z-index没有调整好，在此求解！
效果示例
move框架应用 - 多图片展开
更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。
微信公众号：无媛无故
