方法一:html部分写一个div
<div></div>
css 部分:div{
width:200px//给200像素的宽
height:200px//给200像素的高
border:1px solid #000 //给一个边框 颜色为黑色
background:transparent// 给这个盒子一个透明的背景色
}
好了 ,这个是一个非常简单的 矩形盒子,不过通常都是用H5 的canvas来做的
方法二: html代码 ,创建canvas画布
<canvas id="myCanvas">您的浏览器不支持H5 canvas属性</canvas>
然后就是js 部分了
var c=document.getElementById("myCanvas") //获取canvas
var ctx=c.getContext("2d")创建一个2D 对象
ctx.beginPath() //
ctx.lineWidth="6"//线条宽度
ctx.strokeStyle="red"//设置为黑色
ctx.rect(5,5,290,140)//创建矩形,起始点的x y坐标,和矩形宽高
ctx.stroke() //绘制矩形(无填充) [有填充用 ctx.fill()]
也是可以直接写
var canvas=document.getElementById('myCanvas')
var ctx=canvas.getContext('2d')
ctx.fillStyle='#FF0000'
ctx.fillRect(0,0,80,100) //起始坐标和填充色
方法三:通过绘制路径来画矩形
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.moveTo(10,10) //起始点
cxt.lineTo(50,10) //结束点 同时也是下一个结束点的起始点
cxt.lineTo(50,50)
cxt.lineTo(10,50)
cxt.lineTo(10,10)
cxt.stroke()
代码就不写了,思路就是当浏览器滚动到某个位置时改变元素的position属性。比如当浏览器的scrollTop >500时,就改变元素的position:
if(scrollTop >500) {
el.style.position = 'fixed'
} else {
el.style.position = 'static'
}
这个500只是随便指定的一个数字,具体由你自己指定,一般由程序获得。
假设页面有一个参照元素,当浏览器滚动位置超过这个参照元素位置时就使头部固定。
一般是用element.offsetTop获得
PrintWriter out =response.getWriter()out.println("<script language='javascript'>alert('')</script>")
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)