我有以下代码:
<style>
#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;}
.item:hover{height:auto}
</style>
<div id="items">
<div class="item">text 1<br>text 1<br>text 1</div>
<div class="item">text 2<br>text 2<br>text 2</div>
<div class="item">text 3<br>text 3<br>text 3</div>
<div class="item">text 4<br>text 4<br>text 4</div>
<div class="item">text 5<br>text 5<br>text 5</div>
<div class="item">text 6<br>text 6<br>text 6</div>
<div class="item">text 7<br>text 7<br>text 7</div>
<div class="item">text 8<br>text 8<br>text 8</div>
<div class="item">text 9<br>text 9<br>text 9</div>
<div class="item">text 10<br>text 10<br>text 10</div>
</div>
看到它在行动:http: //jsfiddle.net/6K7t4/
当一个div id悬停时,它应该扩展而不会移动其他div,如下所示:http: //shopping.kelkoo.co.uk/ss-shirt.html
另外,请建议如何实现跨浏览器解决方案.
如果可以使用纯css完成,我更喜欢这个解决方案.
如果没有,可以在没有插件的情况下以简单的方式使用jquery吗？
我希望用javascript和jquery实现无限滚动.
我是javascript的新手.
在网上搜索之后,我有了这个代码.
<!DOCTYPE html><html lang="en"><head><title>scrolling</title>
<style>
.page {height: 900px;border:solid 1px #ccc}
</style>
</head>
<body>
<div id="scrollcontent">
<div class="page"></div>
</div>
<script>
//########################
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { …我有这个代码http://jsfiddle.net/C32Hx/4/
<style>
body {margin-left:10px;}
#top {background:blue;width:30px;height:30px;
position:absolute; bottom:0; z-index:2;}
button {margin-top:200px}
#back {width:120px;height:100px;background:red; position:absolute}
#front {width:100px;height:100px;background:green;
position:absolute; margin-top:50px; z-index:0.8}
</style>
<div id="back"><div id="top"></div> back</div>
<div id="front">front</div>
<button onclick="rotate()">rotate</button>
<script>
function rotate()
{
document.getElementById("back").style.MozTransform = "rotate(10deg)";
document.getElementById("back").style.WebkitTransform = "rotate(10deg)";
document.getElementById("back").style.msTransform = "rotate(10deg)";
document.getElementById("back").style.transform="rotate(10deg)";
return false;
}
</script>
旋转后,#top元素上不会保留z-index.
请建议如何解决这个问题.
谢谢.