js页面左右滑动特效代码（js滚动特效）[20240506更新]

本篇文章给大家谈谈js页面左右滑动特效代码，以及js滚动特效对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js如何实现惯性滑动效果
• 2、js动画效果代码方法
• 3、js移动div怎么做出滑动的效果？
• 4、网页js左右滑动代码。
• 5、jquery怎么实现从右到左滑出来的效果？

js如何实现惯性滑动效果

主要思路是：鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。

下面是简单的js代码实现：仅供参考：

style    

#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:0;}    

/style    

script    

window.onload=function(){    

var oDiv=document.getElementById('div1');    

var iSpeedX=0;    

var iSpeedY=0;     

var lastX=0;    

var lastY=0;    

var timer=null;     

oDiv.onmousedown=function(ev){    //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。

var oEvent=ev || event;    

var disX=oEvent.clientX-oDiv.offsetLeft;    

var disY=oEvent.clientY-oDiv.offsetTop;      

clearInterval(timer);      

document.onmousemove=function(ev){   //鼠标拖动事件。 

var oEvent=ev || event;     

oDiv.style.left=oEvent.clientX-disX+'px';    

oDiv.style.top=oEvent.clientY-disY+'px';    

iSpeedX=oEvent.clientX-lastX;    

iSpeedY=oEvent.clientY-lastY;     

lastX=oEvent.clientX;    

lastY=oEvent.clientY;

}    

document.onmouseup=function(){    //当鼠标抬起后，清掉移动事件。

document.onmousemove=null;    

document.onmouseup=null;

oDiv.releaseCapture  oDiv.releaseCapture();      

startMove();    

}    

oDiv.setCapture  oDiv.setCapture();    

return false;

}         

function startMove(){    //移动函数，主要操作是计算鼠标移动速度和移动方向。

clearInterval(timer);    

timer=setInterval(function(){    

iSpeedY+=3;    

var t=oDiv.offsetTop+iSpeedY;    

var l=oDiv.offsetLeft+iSpeedX;    

if(tdocument.documentElement.clientHeight-oDiv.offsetHeight){    

t=document.documentElement.clientHeight-oDiv.offsetHeight;    

iSpeedY*=-0.8;    

iSpeedX*=0.8;

}     

if(t0){    

t=0;    

iSpeedY*=-0.8;    

iSpeedX*=0.8;

}    

if(ldocument.documentElement.clientWidth-oDiv.offsetWidth){    

l=document.documentElement.clientWidth-oDiv.offsetWidth;

iSpeedX*=-0.8;    

iSpeedY*=0.8;    

}    

if(l0){    

l=0;    

iSpeedX*=-0.8;    

iSpeedY*=0.8;

}    

oDiv.style.left=l+'px';    

oDiv.style.top=t+'px';    

if(Math.abs(iSpeedX)1)iSpeedX=0;    

if(Math.abs(iSpeedY)1)iSpeedY=0;    

if(iSpeedX==0  iSpeedY==0  t==document.documentElement.clientHeight-oDiv.offsetHeight){    

clearInterval(timer);    

}    

document.title=i++;    

},30);

}    

};    

/script    

/head    

body    

div id="div1"/div    

/body

js动画效果代码方法

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态

2.fadeln()与fadeOut();

这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性

3.fadeToggle();

此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo() ;

fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值

5.slideDown(); 与 slideUp() ;

slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示

7.animate() ;

这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。

8.stop() ;

停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。

js移动div怎么做出滑动的效果？

1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，

2：还有移动端的zepto库 也有手势插件，

3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，

4：早期的应该是用wml语言支持的WMLScript实现。

5：举例：使用iscroll.js实现

1）下载iScroll.js，百度搜索iScroll.js下载即可

2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件

3）编写规范的html格式

只有如下格式才能实现滑动效果

div id="wrapper"

div class="scroll"

这个区域可以滑动

/div

/div

如下格式不能滑动

div id="wrapper"

div class="other"这个区域可以滑动/div

div class="scroll"

这个区域不可以滑动了

/div

/div

只有wrapper的第一个子元素才能实现滑动效果。

4）编写js调用代码

var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false});

第一参数必需是滑动元素的父元素的id。

主要参数一览：

hScroll: true, 左右滑动，默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条，默认为显示

vScrollbar: true,是否显示X轴滚动条，默认为显示

网页js左右滑动代码。

script

var show = 0;

function leftRun(){

show-=100;

document.getElementById("b").style.marginLeft = show+"px";

}

function leftRun(){

show+=100;

document.getElementById("b").style.marginRight= show+"px";

}

/script

div id="a" width="500"

div id="b" width="1000"

正文内容

/div

/div

input type="button" id="leftRun" onclick="leftRun()" /

input type="button" id="rightRun" onclick="rightRun()" /

jquery怎么实现从右到左滑出来的效果？

引入jquery.js，复制以下代码，即可运行

1，style type="text/css"

2，.slide {

3，position: relative;

4，height: 200;

5，lightyellow;

6，}

7 ，

8，.slide .inner {

9，position: absolute;

10，left: 0;

11，bottom: 0;

12，height: 100;

13，lightblue; ,

14，width: 100%

15，}

16，/style

1、slidetoggle() 交替slidedown(),slideup()

Html代码

div id="slidebottom" class="slide" 

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$('#slidebottom button').click(function() {

$(this).next().slideToggle();

});

2、左侧横向交替滑动 Animate Left

Html代码

div id="slidewidth" class="slide"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slidewidth button").click(function(){

$(this).next().animate({width: 'toggle'});

});

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

Html代码

div id="slideleft" class="slide" style="width: 50%;float: right"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slideleft button").click(function(){

var $lefty = $(this).next();

$lefty.animate({

left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0

});

});

4、右侧横向滑动Slide to right

Html代码

div id="slidemarginleft" class="slide" style="width: 60%;float: left"

button

slide it

/button

div class="inner"

Slide from bottom

/div

/div

Js代码

$("#slidemarginleft button").click(function(){

var $marginlefty = $(this).next();

$marginlefty.animate({

marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0

});

});

js页面左右滑动特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js滚动特效、js页面左右滑动特效代码的信息别忘了在本站进行查找喔。