程序博客网 > 护肤品知乎

html实现动画效果并且实现与html完全分离

来源：互联网发布：护肤品知乎编辑：程序博客网时间：2024/06/08 16:08

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
  window.onload = func;
}else{
  window.onload = function(){
   oldonload();
   func();
  }
}
}
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
  parent.appendChild(newElement);
}else{
  parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement){
  clearTimeout(elem.movement);
}

if(!elem.style.left){
  elem.style.left = "0px";
}
if(!elem.style.top){
  elem.style.top = "0px";
}

var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y){
  return true;
}
if(xpos < final_x){
  var dist = Math.ceil((final_x - xpos)/10);
  xpos = xpos + dist;
}
if(xpos > final_x){
  var dist = Math.ceil((final_x - xpos)/10);
  xpos = xpos + dist;
}
if(ypos < final_y){
  var dist = Math.ceil((final_y - ypos)/10);
  ypos = ypos + dist;
}
if(ypos > final_y){
  var dist = Math.ceil((final_y - ypos)/10);
  ypos = ypos + dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat =
"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}

function prepareSlideshow(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("linklist")) return false;
var slideshow = document.createElement("div");
slideshow.setAttribute("id","slideshow");
var preview = document.createElement("img");
preview.setAttribute("src","images/5.jpg");//
preview.setAttribute("alt","building blocks of web design");
preview.setAttribute("id","preview");
slideshow.appendChild(preview);
var list = document.getElementById("linklist");
insertAfter(slideshow,list);

var links = list.getElementsByTagName("a");
links[0].onmouseover = function(){
  moveElement("preview",0,0,10);
}
links[1].onmouseover = function(){
  moveElement("preview",-170,0,10);
}
links[2].onmouseover = function(){
  moveElement("preview",-325,0,10);
}
links[3].onmouseover = function(){
  moveElement("preview",-490,0,10);
}
}
addLoadEvent(prepareSlideshow);

// JavaScript Document

实现动画效果，图像滑动的效果

@charset "utf-8";
#linklist{
list-style:none;
}

#linklist li{
display:inline;
}
li{
/*float:left;*/
padding:1em;
list-style:none;
}
a{
color: #c60;
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
H1{
color:#333;
background-color:transparent;
}
body{
font-family:Arial, Helvetica, sans-serif;
color:#333;
background-color:#ccc;
margin:1em 10% ;
}
#slideshow{
width:160px;
height:100px;
position:relative;
overflow:hidden;
}
#preview{
position:absolute;
}
/* CSS Document */

验证html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="js/snapshots.js"></script>
<link rel="stylesheet" href="css/snapshots.css" type="text/css" media="screen" />
</head>

<body>
<h1>Snapshots</h1>
<ul id="linklist">
    <li>
        <a href="images/1.jpg" title="a girl"><img src="images/1.1.jpg" alt="girl"/>
        </a>
    </li>
        <li>
        <a href="images/2.jpg" title="tree"><img src="images/2.2.jpg" alt="tree"/>
        </a>
    </li>
        <li>
        <a href="images/3.jpg" title="night"><img src="images/3.3.jpg" alt="night"/>
        </a>
    </li>
        <li>
        <a href="images/4.jpg" title="a hole"><img src="images/4.4.jpg" alt="a hole"/>
        </a>
    </li>
    </ul>
   
</body>
</html>

护肤品知乎

护肤品知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子理县旅游景点理县住宿推荐桃坪羌寨理发拼音小小理发师梦到理发越南理发理发师情人阿宾理发理发的拼音自己理发理发师陶德做梦理发理发师英文理发英文小小理发师3 梦见理发师给自己理发理发工具理发英语怎么学理发上门理发理发技术理发学习怎样理发学理发怎样专业理发剪理发技巧如何理发男士理发怎么理发理发教学理发入门理发上门自学理发理发价格新生儿理发宝宝理发理发知识理发儿童理发刮脸小孩理发