html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域,原本折叠起来的商品便会自动展开,详情便会展现在用户面前,而这一动画,就是利用了DOM+JS结合来实现的,今天的小练习就是要实现这个效果。
首先,先将页面基本的框架用html实现,将四张图封装在了一个名为“container”的div块中
鼠标滑过页面自动变大
接着,我将大体的样式用了两个样式表修饰如下:
依次为
slidingdoors.css和reset.css:
#container {
height: 477px;
margin: 0 auto;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
#container img {
position: absolute;
display: block;
left: 0;
border-left: 1px solid #ccc;
}
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
接下来,就要实现滑动效果了,js代码如下:
window.οnlοad=function(){
var box=document.getElementById("container");
var imgs=box.getElementsByTagName("img");
var imgwidth=imgs[0].offsetWidth;
var exposewidth=160;
var boxwidth=imgwidth+exposewidth*(imgs.length-1);
box.style.width=boxwidth+'px';
function setImgPos(){
for(var i=1;i
{
imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';
}
}
setImgPos();
var translate=imgwidth-exposewidth;
for(var i=0;i
{
(function(i){
imgs[i].οnmοuseοver=function(){
setImgPos();
for(var j=1;j<=i;j++)
{
imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
}
};
})(i);
}
};
弄好后的效果图如下:
遇到的问题:
1.图片复位函数中i、j变量傻傻分不清;
2.做出来的效果一张图片复位后把其余未复位图片都挡住了,主要是复位函数出了小问题。
经验:js函数变量复杂,逻辑严谨,写代码时一定要谨慎小心
以上就是本文的全部内容,希望对大家的学习有所帮助。
html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果相关推荐
- 单机按钮来图片轮播_原生js如何实现轮播图效果?
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
- html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
- php 鼠标 移动 手型,JS实现的鼠标跟随代码(卡通手型点击效果)
这篇文章主要介绍了JS实现的鼠标跟随代码,带有卡通手型点击效果.涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧,需要的朋友可以参考下,具体如下: 一个跟随鼠标的小手效果,鼠标移在哪里, ...
- 网站禁用鼠标右键php代码,JS实现禁止鼠标右键的功能
遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择"图片另存为"或"复制"来达到我们的目的.但是,目前有许多网页都屏蔽 ...
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- html轮播图京东效果,js实现京东轮播图效果
Title body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wrap{ position:relative; width:480p ...
- js+html2canvas实现网页放大镜效果:放大镜图片使用css样式background背景图,鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
- android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...
- 在网页广告栏中经常看到左右来回移动的广告图片。请使用html+js实现一个左右移动的图片效果。图片自选。
在网页广告栏中经常看到左右来回移动的广告图片.请使用html+js实现一个左右移动的图片效果.图片自选. <!DOCTYPE html> <html><head>& ...
最新文章
- numpy报错:ModuleNotFoundError: No module named 'numpy.core._multiarray_umath'(解决办法:安装更高版本的numpy)
- c#中 cmd.parameters.add() 方法的问题
- python小白逆袭大神课程心得_python小白逆袭大神(深度学习7日训练营)——心得体会...
- 并发框架Disruptor
- hashMap 和linkedHashMap
- python字符串_Python字符串三种格式化输出
- java并发编程实战读书笔记3
- JavaScript实现简易计算器
- 台式计算机提示内存不足怎么办,台式电脑提示内存不足怎么回事
- Oracle多表关联查询
- 微软bi报表服务器,安装适用于 Power BI 报表服务器的 Power BI Desktop
- JAVA关于父亲节的代码_关于父亲节的祝福语
- 骁龙780G和麒麟990哪个好
- 老子是一个怎样的传奇!(转发)
- 中信期货财务因题专题报告:财务因子之单因子测试
- 方维分享怎样修改数据库配置?
- 科技云报道:让入职效率翻倍,数字认证电子签为滴滴“加速”
- android分析声音中的节奏,[AndroidTips]调用TextToSpeech朗读的时候如何中间停顿
- 短信 点击发送后产生的短信信息显示字体颜色修改
- 手机话费充值数据接口_API接口