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

<!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. 【Codeforces 158C】Cd and pwd commands

    [链接] 我是链接,点我呀:) [题意] 让你实现Shell的cd和pwd操作 [题解] 用一个list表示当前的路径 如果路径以/开头则表示需要清空当前路径重新走路 否则在原来路径的基础上继续加就可 ...

  2. 【codeforces 766E】Mahmoud and a xor trip

    [题目链接]:http://codeforces.com/contest/766/problem/E [题意] 定义树上任意两点之间的距离为这条简单路径上经过的点; 那些点上的权值的所有异或; 求任意 ...

  3. SVN学习总结（3）——分支合并

    首先在主干trunck上,创建分支branch1.0.0,如下图: 从主干切换到branch1.0.0,在branch1.0.0中添加test.java文件, 分支与主干的合并,首先应将主干trunc ...

  4. LINUX 内核 图 外国牛人

    http://duartes.org/gustavo/blog/ http://blog.csdn.net/drshenlei

  5. device busy

    在mount的时候经常会有device busy,这通常是因为该目录被某个用户或者进程使用.这时候可以用如下命令: fuser mount point 来看一下该mount point被哪个进程占用. ...

  6. Two Heads Are Often Better Than One

    Two Heads Are Often Better Than One Adrian Wible PROGRAMMING REQUIRES DEEP THOUGHT, and deep thought ...

  7. cppunit 单元测试程序

    原文:http://www.cnblogs.com/wang-kai/p/5106740.html 极限编程(XP)推崇测试优先原则,由此引发了软件开发方法从传统的瀑布模型转向以测试为驱动的敏捷开发模 ...

  8. POJ-2201-Cartesian Tree(笛卡尔树)

    Description Let us consider a special type of a binary search tree, called a cartesian tree. Recall ...

  9. light oj1074

    Description The people of Mohammadpur have decided to paint each of their houses red, green, or blue ...

  10. 从零開始学Xamarin.Forms(二) 环境搭建、创建项目

    一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK.当然还须要 VS2013 update 2(VS2010.VS2012均可)以上. a.  最新 ...