图片滑动效果实现,鼠标移入当前项显示全部信息

原创 2018年04月17日 14:40:14

前言:整理之前做的内容,动画执行结束才执行下一个动画动作,要添加.stop(true)

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    	*{margin: 0;padding: 0;}
    	ul{width: 900px;height:300px;box-sizing:border-box;background: #ddd;overflow: hidden;}
    	li{
    		display: inline-block;
    		width: 134px;
    		height: 300px;
    		background: red;
    		box-sizing: border-box;
    		border: 3px solid green;
       	}
       	ul li:first-child{
       		width: 363px;
       	}
    </style>
</head>
<body>
	<ul>
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
	</ul>
	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			$("ul").on("mousemove","li",function(){
				$(this).stop(true).animate({"width":"363px"},200).siblings().stop(true).animate({"width":"134px"},200)
			})
		})
	</script>
</body>
</html>

效果


--=== 利用微软网格控件进行编辑输入==--

利用微软网格控件进行编辑输入(作者:王莉梅 2001年01月18日 16:51)  Visual Basic中提供了许多标准控件和定制控件,每一个控件都可以提供一组特殊的用户界面和编程能力。充分利用每...
  • coolstar
  • coolstar
  • 2001-05-04 17:31:00
  • 1613

鼠标移入图片显示对应内容

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">      ...
  • xulei911122
  • xulei911122
  • 2012-03-15 18:59:49
  • 1458

js实现鼠标的移入移出控制图片的明暗显示

这是具体的样式,用的是无序列表。 去除列表样式原有的样式;宽度;高度跟随内容变化(不设置;居中;黑色边框,内边距;设置内容与元素框 的关系,使用overflow(规定如何处理不符合元素框的内容) ...
  • TheFoma
  • TheFoma
  • 2015-04-07 19:43:57
  • 2180

CSS如何实现文字隐藏 超出文字隐藏 鼠标移入显示

span{ display: inline-block; width:60px; word-break: keep-all; overflow: hidden; ...
  • yhn1121
  • yhn1121
  • 2016-09-05 14:47:40
  • 6629

当鼠标移入移出div时,触发事件(此处为图片的可见和不可见)

onmouseover='showDel(this)' onmouseout='hideDel(this)' class='selector" + quesNum + " selector-st...
  • zhangqun23
  • zhangqun23
  • 2016-08-08 09:08:48
  • 1744

点击图片改变图片大小,鼠标移入移出改变图片大小

1、点击图片改变图片大小 变大 变小 function $(id){ return document.getElementById(id); } functio...
  • u014520797
  • u014520797
  • 2015-12-23 14:25:20
  • 958

(28)表格隔行变色,并且鼠标移入高亮显示,鼠标移出显示原来的颜色

基本思想:采用表格中某一行的
  • Xuan6251237011
  • Xuan6251237011
  • 2014-07-19 00:40:13
  • 1630

鼠标移入移出,样式修改,显示隐藏提示消息

1.a标签中的ishow是自己定义的属性,自己输入值 2.a:hover表示鼠标移上去时, 3.a:hover:after{content:attr(ishow)}表示鼠标移上去后,显示提示消息...
  • u013415189
  • u013415189
  • 2016-07-27 20:08:49
  • 742

css+js实现鼠标经过图片后,图片变背景图,显示新内容

  • 2016年12月27日 10:19
  • 70KB
  • 下载

AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果

在项目开发中,经常会用到鼠标移入显示,鼠标移出隐藏的效果,在angularjs中,主要使用了ng-mouseenter与 ng-mouseleave 这两个指令来实现鼠标的移入时显示,移出时隐藏的效果...
  • lengyuewusheng99
  • lengyuewusheng99
  • 2017-05-16 13:48:42
  • 1911
收藏助手
不良信息举报
您举报文章:图片滑动效果实现,鼠标移入当前项显示全部信息
举报原因:
原因补充:

(最多只允许输入30个字)