<!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. 「小程序JAVA实战」小程序视图之细说数据绑定（13）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-13/ 在前面的小节里面其实对数据绑定都有所了解了,在这次给老铁在好好说下数据绑定,看下它的方方面面 ...

  2. rtmp发送H264及aac的音视频 (转)

    RTMP推送的音视频流的封装形式和FLV格式相似,由此可知,向FMS推送H264和AAC直播流,需要首先发送"AVC sequence header"和"AAC sequ ...

  3. File类的使用：遍历目录

  4. Oracle字符集的查看查询和Oracle字符集的设置修改（转）

    最近郁闷的字符集2014年7月31日16:32:58 本文主要讨论以下几个部分:如何查看查询oracle字符集. 修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题 ...

  5. 常用的软件设计模式的Java实现——让编程从野生到飞起

    常用的软件设计模式的Java实现——让编程从野生到飞起_野生技术协会_科技_bilibili_哔哩哔哩  https://www.bilibili.com/video/av7596511/

  6. 当property遇上category

    [当property遇上category] @property可以在类定义中,以及extension定义中使用,编译器会自动为@property生成代码,并在变量列表(ivar_list_t)中添加相 ...

  7. PHP自动加载配置ArrayAccess类

    ArrayAccess是PHP的类,可以把对象当成数组来使用访问. Config.php   配置类 <?php namespace IMooc; class Config implements ...

  8. vectors 使用应该注意到的问题

    ector1. vector的元素必须具备 assignable和 copyable . 2.vector的迭代器是随机存取迭代器. 3.要考虑到vector的大小(size)和容量(capacity ...

  9. Python程序调试-TabError: inconsistent use of tabs and spaces in indentation

    报错信息:TabError: inconsistent use of tabs and spaces in indentation 说明:代码缩进统一使用Tab键或空格键,不能混用. 解决办法: 1. ...

  10. java方法学习记录

    ---恢复内容开始--- 方法重载:两个方法有相同的名字,但参数不同,就是方法重载,且不能仅仅依据修饰符或者返回类型的不同来重载方法. 命令行参数的使用 有时候你希望运行一个程序时候再传递给它消息.这 ...