当鼠标移动到小图片上时，小图片显示红色边框并在上面大图片显示相应大图片，效果如图：

<!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">

#div{width:500px;height:500px;border:1px solid #fff

;margin:auto;background:#fff}

li{list-style:none;float:left;margin-top:-15px;margin-left:50px}

</style>

</head>

<body>

<div id="div">

<div style="width:350px;height:262px;border:1px solid #fff

;margin:

auto;">

  <img src="data:images/show1_big.jpg" width="" height="" /> </div>

<div style="width:500px;height:50px;border:1px solid #fff

;margin-top:180px">

<!--ul开始-->

<ul>

  <li><img src="data:images/show1.jpg" width="" height="" onmouseover="change()"/> </li>

  <li><img onmouseover="change1()" src="data:images/show2.jpg" width="" height="" /> </li>

  <li><img src="data:images/show3.jpg" width="" height="" onmouseover="change2()"/> </li>

  <li><img src="data:images/show4.jpg" width="" height="" onmouseover="change3()" /> </li>

  </ul>

            <!--ul结束-->

  </div>

</div>

</body>

<script type="text/javascript">

//定义

function kuang(){

    var getli=document.getElementsByName("li");

    for(var i=;i<getli.length;i++){

        }

    }

          //定义替换图片方法

function change(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show1_big.jpg");

    imgs.style.width="border:1px solid red";

    }

     //定义替换图片方法

    function change1(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show2_big.jpg");

    }

     //定义替换图片方法

        function change2(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show3_big.jpg");

    }

     //定义替换图片方法

    function change3(){

    var imgs=document.getElementsByTagName("img");

    imgs[].setAttribute("src","images/show4_big.jpg");

    }

</script>

</html>

JavaScript+CSS交互的更多相关文章

  1. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  2. C# WinForm 和 javascript进行交互 使用HTML做界面

    01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...

  3. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  4. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  5. C# windows程序应用与JavaScript 程序交互实现例子

    C# windows程序应用与JavaScript 程序交互实现例子 最近项目中又遇到WinForm窗体内嵌入浏览器(webBrowser)的情况,而且涉及到C#与JavaScript的相互交互问题, ...

  6. javascript/css压缩工具---yuicompressor使用方法

    1. 下载 地址:https://github.com/yui/yuicompressor/downloads 2. 安装 yuicompressor是由java写成的一组jar文件,需要jdk环境支 ...

  7. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  8. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  9. 【ActionScript】Flash与网页的交互，ActionScript与JavaScript的交互

    Flash是可以轻松与网页交互数据的,不然为何Flash会有这么大的生命力呢?仅仅是这样编程比較麻烦而已,又要调试Flash,然后又要放到server上调试. 只是这种方式可以收到非常好的效果.Fla ...

随机推荐

  1. 338. Counting Bits(动态规划）

    Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the ...

  2. 使用Eclipse 创建Spring Boot项目

    一.为什么要使用 Spring Boot ? Spring Boot解决的问题 (1) Spring Boot使编码变简单 (2) Spring Boot使配置变简单 (3) Spring Boot使 ...

  3. 洛谷 P1972 BZOJ 1878 [SDOI2009]HH的项链

    题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...

  4. 网页title上面添加图片

    1.效果:

  5. CODEVS1281 Xn数列 (矩阵乘法+快速乘)

    真是道坑题,数据范围如此大. 首先构造矩阵 [ f[0] , 1] * [ a,0 ] ^n= [ f[n],1 ] [ c,1 ] 注意到m, a, c, x0, n, g<=10^18,所以 ...

  6. GDB 调试 PHP文件

    http://www.bo56.com/%E5%9C%A82016%E7%9A%84phpcon%E5%A4%A7%E4%BC%9A%E4%B8%8A%E7%9A%84%E5%88%86%E4%BA% ...

  7. 获取url地址

    用JS获取地址栏参数的方法(超级简单) 采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  8. [Python]通过websocket与jsclient通信

    站点大多使用HTTP协议通信.而HTTP是无连接的协议.仅仅有client请求时,server端才干发出对应的应答.HTTP请求的包也比較大,假设仅仅是非常小的数据通信.开销过大.于是,我们能够使用w ...

  9. Gevent的协程实现原理

    之前之所以看greenlet的代码实现,主要就是想要看看gevent库的实现代码. .. 然后知道了gevent的协程是基于greenlet来实现的...所以就又先去看了看greenlet的实现... ...

  10. ListView的基本使用技巧

    ListView的基本使用技巧 1.headerView和footerView 2.ViewHolder 3.OnScrollListener 4.单行刷新 5.其它细节 ListView提供head ...