位置: 编程技术 - 正文
JS DOM实现鼠标滑动图片效果(js鼠标滚动页面触发事件)
编辑：rootadmin推荐整理分享JS DOM实现鼠标滑动图片效果(js鼠标滚动页面触发事件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js实现鼠标拖拽,javascript移动鼠标,js实现鼠标拖动,js鼠标滚动页面触发事件,js鼠标拖动div,js鼠标滑动特效,js鼠标滑动页面切换,js鼠标滑动页面切换,内容如对您有帮助，希望把文章链接给更多的朋友！
经常，我们在浏览各种网页的时候，都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，详情便会展现在用户面前，而这一动画，就是利用了DOM+JS结合来实现的，今天的小练习就是要实现这个效果。
首先，先将页面基本的框架用html实现，将四张图封装在了一个名为“container”的div块中
接着，我将大体的样式用了两个样式表修饰如下：
依次为
接下来，就要实现滑动效果了，js代码如下：
弄好后的效果图如下：
遇到的问题：
1.图片复位函数中i、j变量傻傻分不清；
2.做出来的效果一张图片复位后把其余未复位图片都挡住了，主要是复位函数出了小问题。
经验：js函数变量复杂，逻辑严谨，写代码时一定要谨慎小心
上一篇：javascript单页面手势滑屏切换原理详解(javascript页面设计)
下一篇：关于JS中match() 和 exec() 返回值和属性的测试(js str.match)