葫芦岛生活问答网

jquery 实现 鼠标滑入图片变大 但其他并排图片 不上下浮动

发布时间:2019-09-21

这个不光用到jquery的animate,还要有css基础才行,要不你光靠js是做不出的。

先来段代码再来说明:
<div>
<ul>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
<li> <img src="xxxx.jpg </li>
……
<ul>
</div>

第一步:先要写css,这个结构不知道你能否看懂。图省事标签上我就不标id或者css,实际做的时候你自己加上id或者class

先把div设成相对定位、设定宽度、隐藏溢出:
div{ position:relative;width:700px; overflow:hidden }
这css代码能看懂吧,看不懂建议去学习下css。

然后再设置 ul, 设置ul宽度(ul宽度等于 li宽度*li个数)、绝对定位及位置。
ul{ width: 1280px; position:absolute; top:0;left:0}

在设置li 宽度 以及浮动
ul li { float:left, width:300px;}

css就完了

剩下就是js了,比如加个按钮点击按钮就让图片向左滚动

$('button').click(function(){
$('ul')..animate({
left: "-300"
}, 1000 );
});
//这是1秒内ul像坐滚动300像素,300像素就是一个li的宽度
})

还有不明白的再追问

回复:

这里图片class="xf"
css:
.xf{width:100px; height:40px; display:fixed; right:10px; top:20px; z-index:9999}

回复:

这里图片class="xf" css: .xf{width:100px; height:40px; display:fixed; right:10px; top:20px; z-index:9999}

回复:

你的动作作用点不一样,第一个是作用在img上,第二个是作用在div上,你如果用show()和hide(),没关系,你用的是fadein和fadeout,这个相当于动画渐变的过程,图片每变一下,jquery都会去判断hover动作,所以第一个会一闪一闪的,第二个没事。

回复:

$("img").hover(function(){ $("this").animate({ width: "90%", height: "90%", }, 1000 ); }); 是这种效果吗

回复:

function moveImage(){ document.getElementById("div1").style.left = 0; document.getElementById("div1").style.top = document.body.scrollTop; } var t1 = window.setInterval("moveImage()",100); 图片位移 上面的是你的要求。下面是一个...

回复:

我看了代码,css和js都有点小问题,我简单改了一下 css问题。 .pcdown p.show{display:block;}上面那段代码比原来的p.show优先级高,所以没效果。 js是下面这么改,这么改js,上面的css可以不用,js直接就控制隐藏和显示。 $(function(){ $('.pc...

回复:

这个不光用到jquery的animate,还要有css基础才行,要不你光靠js是做不出的。 先来段代码再来说明:

回复:

var img = document.getElementById('img'); function bigger(){ img.style.width = '400px'; img.style.height = '400px'; } function smaller(){ img.style.width = '100px'; img.style.height = '100px'; }

回复:

首先是div布局: 2.添加CSS和JS样式:(1)添加CSS样式,就是写静态页面,这个图片怎么在页面上显示;(2)添加JS效果是鼠标经过小盒子, 显示遮罩和大盒子 ,鼠标离开后隐藏。 * {margin: 0;padding: 0;}.box {width: 350px;height: 350px;marg...

回复:

您好,这样的: 1、 Jquery deal images 2、 $(document).ready(function(){ var newImage = new Image(); //预载入图片 var oldImage = $('img').attr('src'); newImage.src = './images/img03.jpg'; $('img').hover(function(){ //鼠标滑过图...

回复:

这里有一个浮动层效果 能自定义定位并随屏滚动而不抖动 还可以设置居中 里面有教程和源码

上一篇:肝癌的靶有哪些?价格多少? 下一篇:榆黄包子粉过敏怎么办,每天晚上都咳

返回主页:葫芦岛生活问答

本文网址:http://dalifu.cn/view-209233-1.html
    信息删除