HTML编程之利用jquery制作长图动画的方法
在网站前端编程开发中,我们经常会遇到需要将图片设置为背景图,当鼠标移入时利用setTimeout定时器去控制改变background-position使得图片逐帧向上移动,鼠标移除则控制向下移动,但要注意在鼠标移入和移出时要相互关闭定时器。具体如何来实现呢?下面就来为各位分析解答一下吧。
var positionC=['0','-75','-150','-225','-300','-375','-450','-525','-600','-675','-750','-825','-900','-975','-1050','-1125','-1200','-1275','-1350','-1425','-1500','-1575','-1650',"-1800"];
// var positionC=['0','-180','-360','-540','-720','-900','-1080','-1260','-1440','-1620','-1500','-1650',"-1800",];
var iconC=0;
var t1;
var i1;
$(".bgk1").mousemove(function () {
clearTimeout(i1);
iconABC();
})
$(".bgk1").mouseout(function () {
iconBC();
})
function iconABC(){
$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");
iconC++;
if(iconC>positionC.length){
iconC=positionC.length;
return;
}
t1=setTimeout(iconABC,80);
console.log("sdd"+iconC)
}
function iconBC(){
clearTimeout(t1);
iconC--;
if(iconC<0){
iconC=0;
return;
}
$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");
i1=setTimeout(iconBC,20);
console.log("--"+iconC)
}
好了,现在是不是就可以实现了呢?如果大家还是存在不理解的地方,或者总是有出错的地方,都是可以留言咨询的。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。
转载于:https://blog.51cto.com/13686158/2296380
HTML编程之利用jquery制作长图动画的方法相关推荐
- 制作HTML长图的APP,长图制作工具 显示只是一张图片,点开一看却发现有很多张图片|制作长图软件...
小编经常在刷微博的时候看到一些挺好看的图片,点开一看发现原来下面还有很多类型的图片.看微博里面的文章也是这样的,点开一看才发现有更多精彩的内容.其实不仅仅是微博,很多地方都会有长图的使用,那这种长图到 ...
- 利用jQuery制作简易手风琴
利用jQuery制作简易手风琴 实现步骤 1.引入jQuery文件 2.将写好的标签进行样式修改 3.逻辑代码的书写 我们先来看看效果: 实现步骤 1.引入jQuery文件 <script sr ...
- 利用chrom 截长图
利用chrom 截长图步骤 F12ctrl+shift+P输入screen选择full size screenshot下载下来使用win10的看图器截图
- 利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果 实现步骤: 1.制作样式 2.逻辑,思路 实现步骤: 1.制作样式 我们先来看看body中的代码: <body><div class="b ...
- 利用Python制作动图演示坐标变换理论
利用Python制作动图演示坐标变换理论 永磁同步电机是一个非线性.强耦合的物理系统,因而不便直接进行控制.后有研究人员创造性的提出了坐标变换理论(后逐渐成为矢量控制的一个部分),让永磁同步电机得以转 ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
- html 圆圈图表插件,利用jquery html5实现图表动画圆形饼图
特效描述:利用jquery html5实现 图表动画 圆形饼图.利用jquery html5实现图表动画圆形饼图 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 *{margin:0; ...
- ps如何把自己的图与样机结合_如何利用PS制作贴图样机那
今天小编教大家一起来通过PS制作智能贴图教程,让我们一起来学习吧. 1.首先我们看下所谓的智能对象的图层,我们发现智能对象的图层关键的一点是智能对象. 2.我们双击智能对象发现他会新增一个新的文件.文 ...
- photo如何制作长图(外送搞笑毒故事)
image.png 今天在朋友圈看到个很搞笑的毒故事,于是发到了朋友圈,希望可以找找乐子,然后发现只能发9张图,但是我这边看了下有22多张搞笑图,所以接下来我才准备将这些图片做成个长图. 这里主要还是 ...
最新文章
- Win64 驱动内核编程-34.对抗与枚举MiniFilter
- MindCon极客周 | 第三届全新席卷而来,SIG英雄帖,做硬核玩家,夺万元大奖!
- 别找了,这才是 Pyecharts 的正确打开方式!
- android中将日志文件输出到sd卡
- 如何从技术上“绞杀”盗链者?
- python的字符串类型本质上是一种字符序列_20170402Python变量类型 知识点梳理
- 关于ubuntu 系统chromium浏览器启用AdobeFlashPlayer
- 安装谷歌插件,程序包无效,解决方法
- Android锁屏勒索病毒分析(4)秒抢红包
- 你还把游戏本地化当作是游戏翻译
- iPhone删掉的照片能恢复吗?iPhone最近删除的照片怎么恢复?
- 一款原型设计工具“墨刀”的介绍
- 如何用Windows命令提示符(cmd.exe)进入指定目录
- 矩阵位移法是用于求解杆系结构的计算机方法,结构力学的教学思路
- 我的十几年技术总结(一):从疯狂到无奈
- NAS升级如何恢复系统文件夹?
- 2019年浙江大学计算机考研复试线,2019年浙江大学考研复试分数线已公布
- JS利用正则快速格式化手机号
- 有哪些改图方便的软件?6款P图软件来看看
- 2014年8月英语总结