[求助]JQ + CSS 的滑动显示图片怎么完成啊

赵先生不知何许人也 2016-12-08 12:28:23

楼主现在才开始学，纯小白

..看到了自定义动画animate ，谁能告诉我怎么用hover方法实现：当我鼠标放到图片上，然后从图片左边滑动显示另一张图片，然后一开又右向左滑动退出啊！！！求大神上代码谢谢

...全文

142 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

bluedrink 2016-12-08

打赏
举报

回复

如果没有记错的话应该是margin-left属性的动画

赵先生不知何许人也 2016-12-08

打赏
举报

回复

不懂啊... 大神能上代码吗？

jq + css 实现简单的图片轮播效果开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。ps：功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-l

目标效果默认选中第一张，鼠标悬浮缓慢放大图片，底部文字介绍由下往上缓慢滑出，选中后边框效果；左右滑动，距离为四张图片。思路定义一个定宽的容器，然后图片不换行并排显示，超出部分隐藏，隐藏x轴滚动条；左右按钮点击，获取容器的滚动条位置，在此基础上加上固定移动距离，然后重置容器滚动条位置。做法左右箭头可以使用图片，我这里使用的是:before和:after伪类做的，通过倾斜

滑动淡入源码HTML+JS+JQ部分CSS部分效果源码 HTML+JS+JQ部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link type="text/css" href="CSS/enter.css" rel="stylesheet" /> <script src="https://cdn.boo

摘要随着互联网的发展和普及，基于电子商务的网络购物在中国已经被人们所认可，我们的日常生活已经离不开网购。相对于传统的实体经济而言，电子商务的出现打破了传统的实体经济交易模式，将整个交易流程电子化、数字化，一方面以电子商务实现了电子流代替了实物流，因此可以大量减少人力、物力，极大地降低了运输成本;另一方面突破了时空的限制，使得交易活动可以发生任何时间，任何地点，从而大大提高了效率。因此人们更喜爱网络购物。针对这种情况，我以HTML5+JavaScript+CSS3+PHP为开发技术，设计开发了一个基于

html结构 ··· </style> </head> <body> <h1>demo一个神奇的框架</h1> <p>(点击预览)</p> <!-- <img src="" style="width:200px;height:100p

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章