鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:47:36
Original
1678 people have browsed it


效果就是这样的,跪等啊 。。。。。。。。

回复讨论(解决方案)

要配合js去写

给这么点分,没动力啊

给这么点分,没动力啊

可以加分的 

你直接写一个img,size小一点,然后指上去,把你那个大一点的img的url变成你小的那个img的url,
如果你有分大图片和小图片的话,就直接把大的img的url变成大文件的url就可以了!

你直接写一个img,size小一点,然后指上去,把你那个大一点的img的url变成你小的那个img的url,
如果你有分大图片和小图片的话,就直接把大的img的url变成大文件的url就可以了!

能帮帮我吗  跪求啊  急死我了

<script type="text/javascript">		function aa(url){			document.getElementById("test").src=url		}	</script>	<body>		<img  src="imgad.jpg"    style="max-width:90%"  style="max-width:90%" onmouseover="aa(this.src)" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >		<img  src=""    style="max-width:90%"  style="max-width:90%" id="test"/ alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >	</body>
Copy after login
Copy after login
Copy after login

你看看吧!

<script type="text/javascript">		function aa(url){			document.getElementById("test").src=url		}	</script>	<body>		<img  src="imgad.jpg"    style="max-width:90%"  style="max-width:90%" onmouseover="aa(this.src)" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >		<img  src=""    style="max-width:90%"  style="max-width:90%" id="test"/ alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >	</body>
Copy after login
Copy after login
Copy after login

你看看吧!


我的意思是鼠标移动在小图上面 右边显示大图


<script type="text/javascript">		function aa(url){			document.getElementById("test").src=url		}	</script>	<body>		<img  src="imgad.jpg"    style="max-width:90%"  style="max-width:90%" onmouseover="aa(this.src)" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >		<img  src=""    style="max-width:90%"  style="max-width:90%" id="test"/ alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >	</body>
Copy after login
Copy after login
Copy after login

你看看吧!


我的意思是鼠标移动在小图上面 右边显示大图
我只是给你一点实现的代码,你自己弄到你里面去啊!
我这个是上下,图片大小自己设置的.

<!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></head><style type="text/css">body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,div{margin:0;padding:0}body,button,input,select,textarea{font:100%/1.5 Arial,Helvetica,tahoma,\5b8b\4f53,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#fff}a:hover{color:#fff;text-decoration:none}a:focus{outline:none;-moz-outline:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img,a{border:0 none;outline:0 none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}input,textarea{outline:none}abbr,article,aside,bb,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,mark,menu,meter,nav,output,progress,section,time{display:block;height:auto}textarea{resize:none}/* 清除浮动 */.clearfix:after{clear:both;content:"\20";display:block;font-size:0;height:0;line-height:0;visibility:hidden}.clearfix{display:block;zoom:1}.box{width:1200px;position:relative}.list{margin:20px 0 0 30px}.list li{float:left;margin-right:20px}.list li img{width:120px;height:80px}.showbox{position:absolute;top:0;right:0}#showimg{width:360px;height:300px}</style><body><div class="box">    <ul class="list clearfix" id="list">        <li><img  src="img/1.jpg" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" ></li>        <li><img  src="img/2.png" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" ></li>        <li><img  src="img/3.jpg" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" ></li>        <li><img  src="img/4.png" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" ></li>        <li><img  src="img/5.png" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" ></li>    </ul>        <div class="showbox">        <img  src="" id="showimg" / alt="鼠标移动左边的小图,右边显示大图,求大神,在线等啊!_html/css_WEB-ITnose" >    </div></div><script type="text/javascript">	var url = ""	var li = document.getElementById("list").getElementsByTagName("img");	for(var i=0; i<li.length; i++){		li[i].onmouseover = function(){			url = this.src;			document.getElementById("showimg").src = url;		}	}</script></body></html>
Copy after login

CSS就可以了 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template