【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 ...
随机推荐
- Java运行内存结构分析
- PAT 天梯赛 L1-009 N个数求和
模拟题 题目链接 题解 每次将两个分数进行相加,到最后再将结果化成带分数.主要考察的最大公约数与最小公倍数. 代码如下: #include<cstdio> #include<cstd ...
- 程序ajax请求公共组件-- app-jquery-http.js
$.HTTP = { getUrlParam : function (name) { var reg = new RegExp ("(^|&)" + name + &quo ...
- SpringMVC接收页面表单参数-java-电脑编程网
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Docker - 容器编排工具 compose 之安装
准备 首先,在使用和安装 docker compose之前,我们应该确保我们已经安装了 docker engine. 安装 官网上面有好多种安装方式,由于我们现在是在使用Docker, 个人感觉应该以 ...
- Nginx负载均衡策略
目前nginx负载均衡支持的5种方式的分配 1. 轮询 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. upstream backserver { server ...
- 在win10环境下安装eclipse mars版本
1下载eclipse软件.下载地址:http://www.eclipse.org/downloads/ 不要下载.exe文件.直接下载安装包,下载对应的安装包,我下载的是这个Eclipse IDE f ...
- Classification of text documents: using a MLComp dataset
注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...
- linux shell 之if-------用if做判断
综合网络,略有修改, 一 简介 1 字符串判断 str1 = str2 当两个串有相同内容.长度时为真 str1 != str2 当串str1和str2不等时为真 -n str1 当串的长度大于0 ...
- 《算法导论》归并排序----merge-sort
伪代码请见<算法导论>2.3节 merge-sort实现: public class MergeSort { public static void sort(double [ ...