滑动带特效代码（图标滑动特效）

admin 发布：2022-12-19 23:40 143

今天给各位分享滑动带特效代码的知识，其中也会对图标滑动特效进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、如何使用flash as2.0代码实现滑动屏幕切换效果？
2、网页css设置鼠标移动有特效
3、html5上下滑动“翻页”实现，是真正的翻页
4、谁有FLASH制作的左右滑屏效果代码啊

如何使用flash as2.0代码实现滑动屏幕切换效果？

list_mc 是要移动的对象（MC），之前写滑动效果没有实现鼠标跟随，这次加上了鼠标跟随，还有缓冲的效果，同时需要判断鼠标滑动的角度和滑动的距离，AS 代码如下：

root = this;

root.k = 3;

// 移动的宽度

root.blockWidth = 300;

root.enabledMove = false;

root.enRun = false;

var mouseListener:Object = new Object();

mouseListener.onMouseDown = function() {

if (root.enRun == true) { // 这次动作没完成，不能进行第二次

return;

}

root.enRun = true;

root.startX = _xmouse;

root.startY = _ymouse;

// 目标的 _x 初始位置

root.mcStartX = root.list_mc._x;

root.onEnterFrame = function() {

root.endX = _xmouse;

root.endY = _ymouse;

xx = Math.abs(root.endX-root.startX);

yy = Math.abs(root.endX-root.startY);

cc = Math.sqrt((xx*xx)+(yy*yy));

if (cc == 0) {

corner = 0;

} else {

corner = (yy/cc)*90;

}

//trace('xx:'+xx);

if (corner50 xx120) {

root.enabledMove = true;

moveBa();

}

};

mouseListener.onMouseUp = function() {

if (root.enabledMove == true) { // 鼠标点击，需要移动后才能执行

root.enabledMove == false;

root.endX = _xmouse;

delete root.onEnterFrame;

root.onEnterFrame = function() {

moveBa();

};

}

};

Mouse.addListener(mouseListener);

function moveBa() {

//mcEndX = root.mcStartX+(root.endX-root.startX);

if ((root.endX-root.startX)0) {

offset = root.blockWidth;

} else {

offset = -root.blockWidth;

}

mcEndX = root.mcStartX+offset;

//trace(mcEndX+":"+root.list_mc._x);

root.list_mc._x += (mcEndX-root.list_mc._x)/root.k;

if (Math.abs((mcEndX-root.list_mc._x))1) {

root.list_mc._x = mcEndX;

trace(root.list_mc._x);

root.enRun = false;

delete root.onEnterFrame;

}

网页css设置鼠标移动有特效

首先我们创建一个html文件，写出html文件的一些基础代码

然后我们在网页中新建一个div，并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，

接下来我们使用下面的代码去除标签的格式，其中：list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示，并且为左浮动margin-right:20px;表示设置标签右外边距

刷新浏览器中html文件查看效果，

这里我们开始添加动画：

给

标签添加：

transition:transform 0.1s;

transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointer;transform:translate(0,-10px);}

cursor:pointer;表示鼠标滑过显示为小手形状

transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：

html5上下滑动“翻页”实现，是真正的翻页

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手机页面触屏滑动上下翻页特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

section class="u-alert"

img style="display:none;" src="./hamer_files/loading_large.gif"

div class="alert-loading z-move"

div class="cycleWrap" span class="cycle cycle-1"/span

span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

/div

div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

/div

/section

section class="u-arrow"

p class="css_sprite01"/p

/section

section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

div class="translate-back" style="height: 918px;"

div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

/div