【js编程艺术】小制作五
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Design</title>
<link rel="stylesheet" type="text/css" href="styles/list.css">
</head>
<body>
<h1>Web Design</h1>
<p>These are the things you should know</p>
<ol id="linklist">
<li>
<a href="images/shuangyu.jpg">shuangyu</a>
</li>
<li>
<a href="images/baiyang.jpg">baiyang</a>
</li>
<li>
<a href="images/jinniu.jpg">jinniu</a>
</li>
<li>
<a href="images/shuangzi.jpg">shuangzi</a>
</li>
</ol>
<script type="text/javascript" src="scripts/prepareSlideshow.js"></script>
</body>
</html>
2.css
#slideshow{
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
#preview{
position: absolute;
}
3.js
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);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - xpos) / 10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil((xpos - final_y) / 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/shuangbaijinshuangzi.gif");
preview.setAttribute("alt", "buliding 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", -100, 0, 10);
}
links[2].onmouseover = function() {
moveElement("preview", -200, 0, 10)
}
links[3].onmouseover = function() {
moveElement("preview", -300, 0, 10)
}
}
addLoadEvent(prepareSlideshow);
【js编程艺术】小制作五的更多相关文章
- 【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
- 【js编程艺术】小制作六
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 【js 编程艺术】小制作四
1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 【js 编程艺术】小制作三
1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 【js 编程艺术】小制作二
首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...
- 【js编程艺术】 之有用的函数
学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...
- JS 编程艺术
JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...
- Google V8编程详解（五）JS调用C++
http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
随机推荐
- 设置gridcontrol的焦点行
private void gridView1_DoubleClick(object sender, EventArgs e) { try { ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- Java——类谜题
1.令人混淆的构造器 代码如下格式: public class Confusing { private Confusing(Object o) { System.out.println("O ...
- CodeForces 621B Wet Shark and Bishops
记录一下每个对角线上有几个,然后就可以算了 #include<cstdio> #include<cstring> #include<cmath> #include& ...
- HUST 1027 Enemy Target!
求二分图的最小点覆盖集,并输出 对于每一个a[i][j]=1,我们从行i-->列j建立一条边 显然,这张图是一张二分图.左边的节点代表删除哪一行,右边的节点代表删除哪一列.中间的边代表所有a[i ...
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...
- 在mac本上删除mysql
The steps: First you need to edit the file in: /etc/hostconfig and remove the line Since this is a s ...
- STM8的GPIO驱动
芯片的外设一般按照这么几个流程来进行,GPIO,外部中断,定时器,串口,ADC,IIC,SPI,下面我就按照各个模式来写 首先是GPIO,STM8的GPIO拥有复用功能,这句话告诉我们必然需要配置IO ...
- D Vitamin - the wonder vitamin
原文 Be healthier and happier by spending time in the sun In the dead of winter,we don't typically thi ...
- leetcode--010 Linked List Cycle II
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAApAAAACICAIAAADfzUzYAAANeklEQVR4nO3dQa7bthbG8W4mK/A+so