html5点击放大,html5放大比例
html5 鼠标放在下面的图片时,会放大到中间就像图片呢样。求代码
!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文件,图片地址替换一下就可以了
html中点击放大鼠标划过放大还有什么
缩小。点击放大鼠标划过是一款比较常见的html5book电子书翻页效果,鼠标滑过来放大(缩小)放大镜尺寸,可以制作出图片放大镜效果。
ios加载html5的webview为什么点击会放大
光有meta头是不够的,图片、表格等等任意一个自定义宽或者自动宽的元素都可以把你的界面撑开,如果简单点处理,可以强制给img和table标签加max-width:100%处理,html标签加width:100%;overflow:hidden;
我用html5 做了个手机网站 如何让图片本身100%放大
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来监听处理对应的函数)
所以简单的做还是就用浏览器自带的放大功能吧
文章标题:html5点击放大,html5放大比例
文章位置:http://ybzwz.com/article/dscsphs.html