!DOCTYPE html
创新互联主要从事成都网站制作、做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务扎赉诺尔,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
html
head
meta charset="utf-8" /
script type="text/javascript" src="jquery-1.7.2.min.js"/script
style type="text/css"
*{
margin: 0;
padding: 0;
}
.hbody{
margin-left: 25%;
}
.show{
margin-left: 160px;
width: 200px;
height: 200px;
border: 1px solid #EEEEEE;
}
.show img{
width: 200px;
height: 200px;
}
.tab{
border: 1px solid #eee;
width: 535px;
height:100px ;
}
.tab img{
border: 1px solid #eee;
width: 100px;
height: 100px;
cursor: pointer;
}
/style
/head
body
div class="hbody"
div class="show"
img /
/div
div class="tab"
img src="1.jpg" /
img src="2.jpg" /
img src="3.jpg" /
img src="4.jpg" /
img src="5.jpg" /
/div
/div
/body
script
$(function(){
var Src = $('.tab').find('img').eq(0).attr('src');
$('.show').find('img').attr('src',Src)
})
$('.tab').find('img').mouseover(function(){
var inx = $(this).index();
var Imgsrc = $('.tab').find('img').eq(inx).attr('src');
$('.show').find('img').attr('src',Imgsrc)
})
/script
/html
引一个jquery文件，图片地址替换一下就可以了
缩小。点击放大鼠标划过是一款比较常见的html5book电子书翻页效果，鼠标滑过来放大（缩小）放大镜尺寸，可以制作出图片放大镜效果。
光有meta头是不够的，图片、表格等等任意一个自定义宽或者自动宽的元素都可以把你的界面撑开，如果简单点处理，可以强制给img和table标签加max-width:100%处理，html标签加width:100%;overflow:hidden;
html5页面加入这段
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/
maximum-scale=2 表示页面最大放大2倍，这样你只要双击图片就可以实现放大了，如果是要js来实现的话 那就得写拖动插件了。 原理：先改变图片那个div的宽度为2倍然后定义那个div为绝对定位，这个div可以拖动（需要js来监听处理对应的函数）
所以简单的做还是就用浏览器自带的放大功能吧
