js移动图片位置,js控制图片定向移动

利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置

　　 思路：

　　1.获取对象距离顶部和左侧的距离；

　　2.获取元素对象；

　　3.当滚动条滚动时获取滚动条滚动的距离；

　　4.滚动条滚动时执行函数：对象距离顶部/左侧的距离变为原本距离顶部/左侧的距离滚动条滚动像素数。

　　超文本标记语言代码：

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=UTF-8

　　标题/标题

　　/头

　　身体

　　div id=left

　　img src=images/z1.jpg alt=/

　　/div

　　div id=右

　　img src=images/z2.jpg alt=/

　　/div

　　/body

　　/htmlcss代码：

　　*{

　　边距：0;

　　填充：0;

　　}

　　正文{

　　宽度：2000像素

　　高度：2000像素

　　}。左侧{

　　位置：绝对；

　　宽度：110像素

　　身高：110像素

　　top:100px；

　　左：50px

　　}。右{

　　位置：绝对；

　　宽度：110像素

　　身高：110像素

　　top:100px；

　　左：1360像素

　　}js代码：

　　var leftT//左侧p距离顶部距离

　　var leftL//左侧p距离左侧距离

　　var rightT//右侧p距离顶部距离

　　var rightL//右侧p距离左侧距离

　　var objLeft//左侧p文档对象

　　var objRight//右侧p文档对象

　　函数位置(){

　　obj left=文档。getelementbyid( left )；

　　obj right=文档。getelementbyid(“right”)；

　　左t=文档。默认视图。getcomputedstyle(obj left，null).顶；

　　leftL=文档。默认视图。getcomputedstyle(obj left，null).左；

　　右t=文档。默认视图。getcomputedstyle(obj right，null).顶；

　　右l=文档。默认视图。getcomputedstyle(obj right，null).左；

　　}

　　//获取滚动条滚动的像素数

　　函数move(){

　　var scrollT=document。文档元素。滚动顶部；

　　var scroll=文档。文档元素。向左滚动；

　　//设置左侧p距离顶部的像素

　　obj左。风格。top=parse int(left t)scrollT px ；

　　obj左。风格。left=parse int(leftL)scro lll px ；

　　obj右。风格。top=parse int(right t)scrollT px ；

　　obj右。风格。left=parse int(right l)scroll px ；

　　}

　　window.onload=place

　　窗户。滚动时=移动；相关推荐：【JavaScript视频教程】

　　以上就是利用射流研究…实现图片固定在屏幕的某个位置！的详细内容，更多请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。