【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 ...
随机推荐
- Windows下编译mxnet
操作系统: 64位Windows10 mxnet的构建和安装包括两个步骤: 第一步,编译出共享库 libmxnet.dll. 第二步,安装语言包,比如python等. 最小编译要求: 最新的支持C++ ...
- spring事务的传播性的理解
来自至顶网的文章 http://developer.zdnet.com.cn/2007/0521/402066.shtml
- 史上最强php生成pdf文件,html转pdf文件方法
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- codis 新版本 CodisLabs 编译安装
codis 3.0 版本编译安装 # 首先安装 go 语言 wget https://storage.googleapis.com/golang/go1.4.2.linux-amd64.tar.gz ...
- Java对文件的16进制读取和操作
大家可以参考一下源代码的相关部分注释,然后写出自己的16进制处理程序.有几个重点地方: 16进制字符串->10进制数 int input = Integer.parseInt("Str ...
- 基于MDK编程STM32程序无法使用，硬件仿真在汇编窗口看到停留在“0x0800XXXX BEAB BKPT 0xAB //进入调试模式”
为方便工作上做测试,移植FreeRTOS到STM32F103xx,先做简单的UART1 printf. 工程编译通过,运行逻辑也确认可行,可就是无法正常打印消息.对比了网上的移植工程也是一致,硬件仿真 ...
- windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器
在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...
- BZOJ 1101 [POI2007]Zap ——Dirichlet积
[题目分析] Dirichlet积+莫比乌斯函数. 对于莫比乌斯函数直接筛出处理前缀和. 对于后面向下取整的部分,可以分成sqrt(n)+sqrt(m)部分分别计算 学习了一下线性筛法. 积性函数可以 ...
- 再次写了第一个servlet
费时2小时,熟悉tomcat和编写了第一个servlet
- centos6.6-------DHCP服务配置
一.为一个单一的网段提供地址服务 软件包: dhcp配置文件: /etc/dhcp/dhcpd.conf租约文件: /var/lib/dhcpd/dhcpd.leases监听端口: ...