手机网站滑动特效代码（手机图标滑动效果）

本篇文章给大家谈谈手机网站滑动特效代码，以及手机图标滑动效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何用Dreamweaver制作 手机滑动翻页的效果？
• 2、求 网页文字特效代码 类似于 这样的 就是中间还有很多代码我不记得了
• 3、页面实现滑动JS代码

如何用Dreamweaver制作 手机滑动翻页的效果？

所需代码：

transition-property: all 0.3s ease;  相应样式处填写

transition-duration: 1s;   变换所需时间

transition-delay:3s;     滑到时，需要多久开始运行

.hover

原理：

制作手机翻页效果，在制作好原网页后，另外制作一个翻页后的效果，在翻页前的DIV中写入transition-property: all 0.3s ease;  和transition-duration: 1s;

.hover后的样式都写好

翻页效果会变的很顺畅，利用的是CSS3 变换过渡原理。

注意：transition-delay:3s;  是运行样式前的等待时间，可以不写，也可以填写时间短一点。为的就是当有两个需要变换的样式时，哪个先来，由自己决定。

求 网页文字特效代码 类似于 这样的 就是中间还有很多代码我不记得了

direction 表示滚动的方向，值可以是left，right，up，down，默认为left

behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）

loop 表示循环的次数，值是正整数，默认为无限循环

scrollamount 表示运动速度，值是正整数，默认为6

scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒

valign 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle align 表示元素的水平对齐方式，值可以是left，center，right，默认为left

bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度

hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

下面的例子使用了 MARQUEE 元素创建了由左向右的滚动字幕，移动速度为每 200 毫秒 10 像素。 marquee direction=

页面实现滑动JS代码

js实现随页面滑动效果的方法。具体如下：

页面向上向下滚动，分享到的模块随着滑动。

要点：

代码如下:

var scrtop =document.documentElement.scrollTop||document.body.scrollTop;

var height = document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - jb51.offsetHeight)/2;

top = parseInt(top);

获得页面垂直居中的位置

上代码：

!DOCTYPE html

html

head

meta charset="gb2312" /

title无标题文档/title

style

body{margin:0; padding:0; font:12px/1.5 arial; height:2000px;}

#jb51{width:100px; height:200px; line-height:200px;

text-align:center; border:1p solid #ccc;

background:#f5f5f5; position:absolute; left:-100px; top:0;}

#jb51_tit{position:absolute; right:-20px; top:60px;

width:20px; height:60px; padding:10px 0;

background:#06c; text-align:center;

line-height:18px; color:#fff;}

/style

script

window.onload = function(){

var jb51 = document.getElementById("jb51");

jb51.onmouseover = function(){

startrun(jb51,0,"left")

}

jb51.onmouseout = function(){

startrun(jb51,-100,"left")

}

window.onscroll = window.onresize = function(){

var scrtop=document.documentElement.scrollTop||document.body.scrollTop;

var height=document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - jb51.offsetHeight)/2;

top = parseInt(top);

startrun(jb51,top,"top")

}

}

var timer = null

function startrun(obj,target,direction){

clearInterval(timer);

timer = setInterval(function(){

var speed = 0;

if(direction == "left"){

speed = (target-obj.offsetLeft)/8;

speed = speed0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetLeft == target){

clearInterval(timer);

}else{

obj.style.left = obj.offsetLeft + speed + "px";

}

}

if(direction == "top"){

speed = (target-obj.offsetTop)/8;

speed = speed0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetTop == target){

clearInterval(timer);

}else{

obj.style.top = obj.offsetTop + speed + "px";

}

document.title = obj.offsetTop + ',' + target + ',' +speed;

}

},30)

}

/script

/head

body

div id="jb51"

分享到内容

span id="jb51_tit"分享到/span

/div

/body

/html

关于手机网站滑动特效代码和手机图标滑动效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。