【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 ...
随机推荐
- CSS文字垂直居中和font-family属性
1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...
- 如何高效的用判断用js判断ie6
用js判断ie6的方法有很多,如: 1. var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest ...
- 从url下载图片--java与python实现方式比较
从url下载图片--java与python实现方式比较 博客分类: 技术笔记小点滴 javapython图片下载 一.java的实现方式 首先读取图片 //方式一:直接根据url读取图片 priva ...
- N皇后问题——递归求解
比较简单,废话不说,上代码: public class NQueen { //比如:position[1]=3,表示第一行的第三列有一个皇后 private int [] position; //总的 ...
- JavaScript 事件模型 事件处理机制
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- Android小功能之垂直滚动条
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" ...
- STM32标准IIC驱动
IIC(Inter-Integrated Circuit)总线是一种由 PHILIPS 公司开发的两线式串行总线,用于连接 微控制器及其外围设备.也是目前很流行的通讯总线,使用IIC总线做产品能够很大 ...
- JNI错误总结（转）
源:JNI错误总结 最近公司里要用JNI技术,用java去调用已经写好的本地DLL库.之前自己也没接触过相关技术,其中花了大部分时间在调试改错上面,网上对于错误的解决方案也不多,现在项目接近完工,自己 ...
- 蓝牙协议 基于TI cc2540 模块的理解（转）
源:蓝牙协议 基于TI cc2540 模块的理解 Bluetooth 4.0开发 Platform:TI IC:cc2540 Environment:windows 7 tools:IAR 8.20. ...
- java中的Set的使用以及各种遍历方法（较为全面）
1. 概述 Java 中的Set和正好和数学上直观的集(set)的概念是相同的.Set最大的特性就是不允许在其中存放的元素是重复的.根据这个特点,我们就可以使用Set 这个接口来实现前面提到的关于商品 ...