PJBlog修改友情链接实现无缝且居中滚动—学习图文的上下左右滚动

  • A+
所属分类:[网站建设]

昨天修改了下博客的友情链接,就是现在看到的样子,还不错吧?一开始我在官方论坛并没有找到我想要的效果,而且还都是些插件之类的。后来在某人博客上被我看到,非常适合我的小站,可是官方找不到,我要怎么把它拿过来呢?我想到一个绝好的方法。我先查看它主页的源代码,但是源代码里显示的是HTML代码呀,先不要急,我复制其中的一段HTML代码(当然要找具有特点性的),然后把它放在百度里搜索,结果自然是出来了。源代码如下:

需要的朋友可以参考一下。
这段代码有些特殊,应该学习一下。想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。
在原作者的基础上做了一定修改,主要还是在样式上面,将表格更换为标签。

先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动:

图片下无缝滚动:

图片左无缝滚动:

图片右无缝滚动:


  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩
avatar
广告也精彩

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: