【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 ...
随机推荐
- WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
- CodeForces 617E XOR and Favorite Number
莫队算法. #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...
- 远离DoS攻击 Windows Server 2016发布DNS政策
Windows Server 2016的网络功能虽然没有获得像Docker容器和Nano Server同等重要的关注,但是管理员们应该了解的是,新的域名系统(Domain Name ...
- linux日常巡检脚本
######################以下是脚本内容开始部分###################################### #!/bin/bash #set -x2012-02-2 ...
- js函数——setinterval和setTimeout
1．window.setTimeout方法 该方法可以延时执行一个函数,例如: <script language="JavaScript" type="text/j ...
- Vue.js与angular在数据实现的思考
Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...
- java中基本类型占用字节数
之前一直使用c/c++开发c中各种类型占用的位数和java还是有区别的,特地找了篇文章过来对比下. 在处理网络协议的时候需要注意 在Java中一共有8种基本数据类型,其中有4种整型,2种浮点类型,1种 ...
- iOS开发——打电话
1.调用 自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://55522555 ...
- kvm学习小计
1.Kvm安装 安装方法两种方式,一种是直接下载源码编译安装,一种是直接使用yum install kvm/apt-get install kvm,这部分就不详细说明了,我使用的是第二种方法,待后 续 ...
- C# 计算文件的HASH
/// <summary> /// 提供用于计算指定文件哈希值的方法 /// <example>例如计算文件的MD5值: /// <code> /// String ...