<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片框</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
background: url(im.jpg);
}
</style>
</head>

<body>
<script type="text/javascript">
for(i=0;i<7;i++){
for(j=0;j<8;j++){
var div=document.createElement('div');
document.body.appendChild(div);

div.style.width='80px';
div.style.height='80px';
//div.style.background='black';
div.style.position='absolute';

div.style.left=j*80+'px';
div.style.top=i*80+'px';
div.style.backgroundPosition =-j*80+'px '+(-i*80) +'px';

div.style.border='1px solid white';
div.style.opacity=0;
div.onmouseover=function(){
this.style.opacity=1;
}
}
}

</script>

</body>
</html>

　　

javascript,图片框的更多相关文章

  1. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  2. 【荐】JavaScript图片放大技术（放大镜）示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  5. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  6. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  7. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. javascript 文本框值变化触发事件

    javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...

  9. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

随机推荐

  1. python学习——练习题（4）

    """ 题目:输入某年某月某日,判断这一天是这一年的第几天? """ import datetime import time from fu ...

  2. leetcode144

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  3. VIM基本命令及自用配置

    VIM基本命令 光标移动 G 最后一行 nG 移动到第n行 n回车 光标下移n行 gg 第一行 查找和替换 /word n 重复前一个查找操作 N 向上查找 :n1,n2s/word1/word2/g ...

  4. 强大的HTML5开发工具推荐

    HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silver ...

  5. SpringMVC总结三：请求Controller返回视图类型以及请求方式、参数介绍

    视图解析,请求Controller返回的视图类型: @Controller @RequestMapping("/test") public class TestController ...

  6. php 实现百度文库搭建

    第一步:安装jodconverter,安装之后可以实现doc文档转成pdf. 文件下载地址为http://www.artofsolving.com/opensource/jodconverter 下载 ...

  7. mfs教程(一)

    对于mfs文件系统也用了半年了,确实不错,最近又翻译了作者的三篇文章,再此一同发上,希望对大家有所帮助.不足之处还请指出,以便完善,谢谢! 感谢网友nonamexz做了精美的pdf文档 MFS文件系统 ...

  8. 【总结整理】word使用技巧

    Tab+Enter,在编过号以后,会自动编号段落 Ctrl + D调出字体栏,配合Tab+Enter全键盘操作吧 Ctrl + L 左对齐, Ctrl + R 右对齐, Ctrl + E 居中 Ctr ...

  9. Python编写两个数的加减法游戏

    目标: 1.实现两个数的加减法 2.回答者3次输错计算结果后,输出正确结果,并询问回答者是否继续 1.使用常规函数实现两个数的加减法游戏 代码如下: #!/usr/bin/env python # - ...

  10. flex 布局的深入研究

    对于flex盒模型的设计期望 flex盒模型是被期望设计成 1:在任何流动的方向上(包括上下左右)都能进行良好的布局 2:可以以逆序 或者 以任意顺序排列布局 3:可以线性的沿着主轴一字排开 或者 沿 ...