html中字体放大和缩小,然后页面刷新后。字体还是放大或者缩小的。这个功能是如何实现的呢?

html-css026

html中字体放大和缩小,然后页面刷新后。字体还是放大或者缩小的。这个功能是如何实现的呢?,第1张

首先说放大缩小字体,直接用js调整字体大小就可以了。

要实现刷新后依然显示之前缩放的大小,那就需要让浏览器记住之前的设置,把字体大小存到cookies中,打开网页再从cookies读取。

给你一段写好的供参考,先引入jquery.cookie.js

var myContent = $('#intro, .article-content, .article-content p')

var fSize = parseInt($.cookie("fontSize") ? $.cookie("fontSize") : parseFloat(myContent.css('fontSize'), 10))

var cDomain = document.location.hostname.match(/[a-z0-9][a-z0-9\-]+\.[a-z\.]{2,6}$/i)

var options = {

path: '/',

domain: cDomain,

expires: 30

}

if(fSize){

myContent.css({'font-size': fSize + 'px'})

$.cookie("fontSize", fSize, options)

}

btnFont.click(function(){

$(this).addClass('on').siblings().removeClass('on')

var cID = $(this).attr("id")

if(cID=="btn-font-plus"){

if(fSize>=20) return

fSize += 2

}else if(cID=="btn-font-reduce"){

if(fSize<=12) return

fSize -= 2

}

myContent.css({fontSize: fSize})

$.cookie("fontSize", fSize, options)

})

具体使用方法请参考cookie文档

你可以使用CSS zoom属性

例如:

body {

zoom: 3

-moz-transform: scale(3)

-moz-transform-origin: 0 0

}

把整个body放大三倍,缩小同理,改成比1小的数字即可

html鼠标悬停左侧缩小图片放大到右边

首先这是一张图片在悬停时放大也就是改变大小(宽,高)实现的。

2,一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的,因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置,他的放大会是向一边的,因此我们必须考虑其放大后的位置。

3,放大的效果是要用动画实现的。

代码:html>

尝试

.a1{width:137pxheight:138pxborder:1px solid redoverflow:hiddenposition:relative}

.pic{position:absolute}

$(function(){

$w = $('.pic').width()

$h = $('.pic').height()

$w2 = $w + 20

$h2 = $h + 20

$('.pic').hover(function(){

$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500)

},function(){

$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500)

})

})