用jquery写了个图片切换效果,想让鼠标悬停图片时候图片停止切换,没有悬停则自动切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



幻灯效果 var scrollDuration = 1000;//切换速度 var timeDuration = 2000;//等待时间 var scrollEasing = 'quadratic'; $(function() { $('#content').carouFredSel({ direction: 'down',//滑动方向 width: 480, height: 264, items: { visible: 1, width: 480, height: 264 }, scroll: { fx: 'directscroll', duration: scrollDuration, timeoutDuration: timeDuration, easing: scrollEasing, onBefore: function( data ) { data.items.old.animate({ 'margin-left': -140 }, scrollDuration, scrollEasing); data.items.visible.css({ 'margin-left': 264 }).animate({ 'margin-left': 10 }, scrollDuration, scrollEasing); } }//scroll end }) }) #box{ width:480px; height:264px; margin:-132px 0 0 -240px; position:absolute; top:50%; left:50%; overflow:hidden; } #content { position:absolute; width:480px; height:260px; bottom:0; left:0; } #content img { display:block; margin-right:10px; float:left; }


1个回答

你可以给图片添加一个mouseenter()和mouseleave()事件,enter进图片时用stop()停止一切动画(或者关闭定时器),leave图片时开启定时器,这样就可以实现鼠标悬停了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jquery.cycle.js进行图片切换的时候如何在图片上显示标题
jquery.cycle.js进行图片切换的时候如何在图片上显示标题
owlCarousel插件,鼠标悬停在原点导航时切换图片
鼠标悬停在分页器上就会图片切换,鼠标移除之后轮播图又进行轮播,利用owlCarousel插件如何实现了
我想通过jquery实现点击导航图片后,切换到点击后的图片。
我想通过jquery实现点击导航图片后,切换到点击后的图片,请问 哪位大神帮帮忙,能给一个 给我吗? 54033997 我QQ
jquery 鼠标悬停显示信息提示框
jquery 鼠标悬停显示信息提示框,但是提示框会影响其他块的布局位置(其他块会向下滑动),要怎么修改才可以让提示框覆盖在最上层显示而不影响其他块的布局 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停显示提示信息窗口</title> <meta http-equiv="content-type"> <style type="text/css"> .content{ display:none; width:250px; height:70px; border-radius:10px; padding:20px; position:relative; top:15px; left:80px; background-color:#2F4056; } </style> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contact").mouseover(function(){ $(".content").show("slow"); $(".contact").mouseout(function(){ $(".content").hide("slow"); }); }); }) </script> </head> <body> <a href="#" style="color: blue;float=left" class="contact">不再犹豫</a> <div class="content" style="color: white;"> 无聊望见了忧郁,达到理想不太易<br /><br /> 谁人定我去或留,定我心中的宇宙 </div> <div > 1无聊望见了忧郁,达到理想不太易<br /><br /> 谁人定我去或留,定我心中的宇宙 </div> </body> </html> ```
jquery如何判断鼠标停留以及鼠标滑过
jquery如何判断鼠标停留以及鼠标滑过?因为有时候鼠标只是经过那个li并不想让下拉菜单出现
js或者jquery 图片大小限制, 拒绝 5K以下的 和 2M以上的图片
js或者jquery 图片大小限制, 拒绝 5K以下的 和 2M以上的图片
Javascript、jQuery图片切换插件
![图片说明](https://img-ask.csdn.net/upload/201711/02/1509607652_580399.png) 想请教一下各位大神,想实现上图中图片左右切换的样式和效果,请问大家有没有用过这种插件,求推荐,谢谢大家
jquery mobile手势实现图片放大
jquery mobilejqm手势实现图片放大。两个手指搓动屏幕实现图片放大功能
jquery 插件 实现图片拖拽效果。拖拽图片出现图片抖动严重问题
在做图片管理时:有一个拖拽功能。图片可以从一个区域拖拽到另一个区域。但拖拽时,图片出现抖动严重问题。不知道什么原因。我使用的是IE11的浏览器,其他浏览器好像没有这种情况 插件:jquery-ui.js。请问路过的朋友,有遇到类似问题。知道解决办法的。告诉小弟一下。感谢![图片说明](https://img-ask.csdn.net/upload/201710/10/1507639589_136970.gif)
jQuery如何实现在ul下添加一张图片自动给改图片添加一个li标签啊
我要实现的效果就是,在ul下添加N张图片,可以从后台任意添加,但是每添加一张图片,都会自动给该图片添加一个li标签,自动生成列表的效果,求大神们支个招,怎么弄, 小弟不会写jQuery语句,所以尽量请各位大侠帮忙写下,谢谢了
JQuery鼠标事件未达效果
使用Jquery的mouseenter方法,鼠标放上去时元素出现快速闪动,不固定出现,当使用 Jquery的mouseleave方法,鼠标放上去时元素也出现快速闪动,不固定消失
jquery哪个插件可以实现:将鼠标移到图片上,会出现大图,就像京东那样?
jquery哪个插件可以实现:将鼠标移到图片上,会出现大图,就像京东那样?
怎么用js或者是jquery写出点击图片可以上传本地图片
![图片说明](https://img-ask.csdn.net/upload/201610/18/1476762907_997919.png)类似于这个图片,一点击就可以从本地上传图片,需要带样式。不想要显示input文本域的样式![图片说明](https://img-ask.csdn.net/upload/201610/18/1476763082_238531.png)
jquery横向切换文字
如何用jquery实现像图片浏览一样,在左右两侧设置向左向右的按钮图标,通过单击向左向右的图标切换显示图片的方式显示一段文字,由于显示文字区域长度有限,超出范围的文字被隐藏起来,通过单击左右两侧的向左向右的图标按钮进行影藏的文字切换显示出来!只希望用jquery简单实现,不要引入其他插件!!
怎样不限制图片数量进行图片展示与切换?
小弟有一个问题,在jsp中实现读取mysql数据库中的所有图片进行图片展示切换, 因为水平有限,只能用模板,可是在网上找的jquery模板都是固定数量的img标签, 我想的是能不能前台只有一个img标签,但是却能在这个img位置上切换所有数据库的图片。 还有另一种思路是打开一个页面后看到一个图片切换的页面,可以切换数据库的所有图片(类似于打开百度图片,可以一幅幅的切换)。 ![图片说明](https://img-ask.csdn.net/upload/201512/26/1451139887_599942.png) 类似于这种效果,重点在于不固定数量。
求一款能实现百度图片移动版效果的jquery插件
能实现左右滑动屏幕切换图片,手势缩放图片效果 PhotoSwipe能实现滑动切换图片,但是没看见有手势缩放的效果不知道它是否支持手势缩放
jquery 图片标注之后,移动缩放时,标注跟着移动
各位哥们, 小弟我有一个问题实在解决不了,希望各位帮帮忙! 使用jquery对一张图片进行标注, 这张图片可以移动缩放, 在图片变化过程中, 标注相对页面不是静止的,是要跟着图片移动的,其在图片的坐标不会发生变化。 图片的缩放可以做出来, 静态图片或百度图片的标注也可以做出来, 但是, 当这个图片可以缩放的时候,怎么保证标注始终固定在图片上的某一个点, 就是如何建立图片的坐标,并获取和设置这个坐标,或者有没有什么第三方引擎。
用JavaScript(或用jQuery)写一个自定义对话框,页面使用html5和CSS。
avaScript(或用jQuery)写一个自定义对话框,对话框可以在页面上移动,用对话框完成对页面的增删改查操作(增删改查使用js或jQuery)不使用后台,效果如图。哪位大神帮我看看怎么写 ![这是一个做好后的效果图,图片说明](https://img-ask.csdn.net/upload/201708/01/1501548707_448061.jpg) ![这是一个点击添加时的效果图,图片说明](https://img-ask.csdn.net/upload/201708/01/1501548767_583186.jpg)![图片说明](https://img-ask.csdn.net/upload/201708/01/1501548821_234363.jpg) ![这是点击删除时的效果图,图片说明](https://img-ask.csdn.net/upload/201708/01/1501548856_565797.jpg) ![这是点击修改时的效果图,图片说明](https://img-ask.csdn.net/upload/201708/01/1501548889_445334.jpg) ![这是点击改密时的效果图,图片说明](https://img-ask.csdn.net/upload/201708/01/1501548934_382820.jpg)
jsp+java裁剪图片鼠标控制div移动放大缩小
最近做了一个头像上传,想做成QQ头像上传那样的,找了各种插件,发现基本上 都是拖动选择区域裁剪图片,并不是我想要的,于是手写了一个纯jquery+java+ajax 的,通过ajax上传到图片并保存到临时文件夹,同时返回图片路径以及宽度高度, 以实现预览效果,鼠标能够拖动图片,能够放大缩小![效果如图](https://img-ask.csdn.net/upload/201708/17/1502959477_513895.png) 但是遗憾的是当图片边框拖动到DIV内部会有留白,这时如果裁剪就会造成选区会超出原图一部分,![如图](https://img-ask.csdn.net/upload/201708/17/1502959824_270867.png) 在此想求一个能够在鼠标拖动和滚轮滚动的时候能够阻止图片边框进入外层DIV的方法,并且不影响下一次拖动和放大缩小,或者有能够在缩放拖动过程中当某一边位置到外层边框的时候将那一边限制其他区域不造成影响
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
使用 Docker 部署 Spring Boot 项目
Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下。首先构建一个简单的 S...
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
redis分布式锁,面试官请随便问,我都会
文章有点长并且绕,先来个图片缓冲下! 前言 现在的业务场景越来越复杂,使用的架构也就越来越复杂,分布式、高并发已经是业务要求的常态。像腾讯系的不少服务,还有CDN优化、异地多备份等处理。 说到分布式,就必然涉及到分布式锁的概念,如何保证不同机器不同线程的分布式锁同步呢? 实现要点 互斥性,同一时刻,智能有一个客户端持有锁。 防止死锁发生,如果持有锁的客户端崩溃没有主动释放锁,也要保证锁可以正常释...
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
Java世界最常用的工具类库
Apache Commons Apache Commons有很多子项目 Google Guava 参考博客
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
为什么要学数据结构?
一、前言 在可视化化程序设计的今天,借助于集成开发环境可以很快地生成程序,程序设计不再是计算机专业人员的专利。很多人认为,只要掌握几种开发工具就可以成为编程高手,其实,这是一种误解。要想成为一个专业的开发人员,至少需要以下三个条件: 1) 能够熟练地选择和设计各种数据结构和算法 2) 至少要能够熟练地掌握一门程序设计语言 3) 熟知所涉及的相关应用领域的知识 其中,后两个条件比较容易实现,而第一个...
Android 9.0 init 启动流程
阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:一、启动流程概述一、 启动流程概述Android启动流程跟Linux启动类似,大致分为如下五个阶段。1.开机上电,加载固化的ROM。2.加载BootLoader,拉起Android OS。3.加载Uboot,初始外设,引导Kernel启动等。...
相关热词 c# 输入ip c# 乱码 报表 c#选择结构应用基本算法 c# 收到udp包后回包 c#oracle 头文件 c# 序列化对象 自定义 c# tcp 心跳 c# ice连接服务端 c# md5 解密 c# 文字导航控件
立即提问