네이티브 JS는 선택 윤곽 효과를 구현합니다.
- 高洛峰원래의
- 2017-02-21 14:51:422074검색
본 글에서는 네이티브 JS를 이용하여 마키 효과를 구현하기 위한 샘플 코드를 주로 공유합니다. 매우 좋은 참고값을 가지고 있으니 아래 에디터로 살펴보겠습니다
효과는 다음과 같습니다. (코드를 복사하여 동적 효과를 볼 수 있으며, 케이스 사진)
코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
p{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: hidden;
}
p ul{
position: absolute;
left:0;
top:0;
}
p ul li{
width: 200px;
height: 200px;
float: left;
}
p ul li img{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<p id="p1">
<ul>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li>
</ul>
</p>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var lis=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=lis.length*lis[0].offsetWidth+'px';
var left=null;
var timer=setInterval(function(){
left-=3;
if(left<-oUl.offsetWidth/2){
left=0;
}
oUl.style.left=left+'px'
},10)
</script>
</body>
</html>자세한 내용은 네이티브 JS 구현 마키 효과 관련 기사는 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.