如图显示的鼠标移动到左边的div里面,就会在右边显示任务详情那个div
鼠标移动到右边的div里面,就会在左边显示任务详情那个divjQuery
鼠标移动到右边的div里面,就会在左边显示任务详情那个divjQuery
解决方案 »
- 【工具分享】Javascript正则表达式调试
- 为什么我的JS引用不进来呢
- B/S模式下计算客户端文件的hash值
- 注册登录的流程图
- 请教一个在网页中js控制默认横向打印的问题
- extjs4 tabpanel引用其他页面panel时border布局高度不能自动适应
- 用JS实现每隔3秒点击下按钮!在线等,分不够可加!
- 求教高高手!简单的一句javascript,我为什么看不懂?!
- 如何禁止右键菜单和shift功能键?
- 請問怎樣在javascript 中從一個框架傳值到另一個框架(frame ) 中呢?
- 谁能帮写下正则过滤哈?
- 这是用jquery中的datagrid方法里的不同列,用相同的名字(flied是必须是对象属性)
if( $(this).index()%2 ){
alert("right" )
}else{
alert("left" )
}
},function(){
});
<style>
.list{
width:240px;
height:500px;
margin:100px;
}
.list div{
float:left;
border:1px solid;
width:100px;
height:100px;
margin:4px;
}
#over{
background:#fff;
border:#ccf 1px solid;
width:100px;
height:100px;
position: absolute;
display:none;
}
</style>
<div class="list">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="over" >
111111111111
</div>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$('.list>div').hover(function(){
console.info($(this).index()%2 )
var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
$('#over').show().css( p )
},function(){
$('#over').hide()
});
</script>
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0,右=1p.left+=$(this).index()%2? -w:w;
左: 当前元素坐标left + w 右 : -w
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0,右=1p.left+=$(this).index()%2? -w:w;
左: 当前元素坐标left + w 右 : -w
大神还有一个问题,这个在IE下无显示无效果
p.left+=$(this).index()%2? -w:w;
那个不是很明白这个$(this).offset() 取当前元素坐标$(this).index()%2 // 左=0,右=1p.left+=$(this).index()%2? -w:w;
左: 当前元素坐标left + w 右 : -w
大神还有一个问题,这个在IE下无显示无效果
你IE?我测试OK
我发下HTML给你看看
<div id="content_game" class="content_game_L">
<div class="box_list">
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="box">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+1200</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="box box_R">
<div class="game_L">
<h3>试玩街机三国-新手送501经验值,获200凤凰读书币</h3>
<div class="game_details">
<div class="game_rmb"><span>+100</span>凤凰读书币</div>
<div class="game_btn"><a href="#">查看详情</a></div>
<div class="clr"></div>
</div>
<div class="game_txt">
<div class="game_star">难度<img src="img/star.png" /></div>
<div class="game_num">67485人已参与</div>
<div class="clr"></div>
</div>
</div>
<div class="game_R"> <a href="#"><img src="img/tj.png" width="210" height="147" /></a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="box_info">
<div class="box_main">
<div class="box_img"></div>
<div class="box_info_title">
<h4>任务详情</h4><span>完成任务后审核十分钟,由系统自动发放奖励</span>
<div class="clr"></div>
</div>
<div class="box_info_list">
<table cellpadding="0" cellspacing="0">
<tr>
<th>步骤</th>
<th>人物等级</th>
<th>奖励</th>
<th>状态</th>
</tr>
<tr>
<td>1</td>
<td>游戏等级达到<span>10级</span></td>
<td><span>+100凤凰读书币</span></td>
<td><span>已完成</span></td>
</tr>
<tr>
<td>2</td>
<td>游戏等级达到<span>15级</span></td>
<td><span>+125凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>3</td>
<td>游戏等级达到<span>25级</span></td>
<td><span>+150凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>4</td>
<td>游戏等级达到<span>30级</span></td>
<td><span>+250凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>5</td>
<td>游戏等级达到<span>35级</span></td>
<td><span>+300凤凰读书币</span></td>
<td>未完成</td>
</tr>
<tr>
<td>6</td>
<td>游戏等级达到<span>40级</span></td>
<td><span>+400凤凰读书币</span></td>
<td>未完成</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page">
<div class="page_main"><a href="#" class="prev"></a><a href="#" class="next"></a></div>
<div class="page_num"><span>1</span>/8</div>
<div class="clr"></div>
</div>
</div>我怎么调都调不好距上和距左的位置
jQuery.noConflict();
jQuery(function($){
$(".box_list>div").hover(function(){
$(this).css({"border-color":"#ff5b02"});
console.info($(this).index()%2 )
var p=$(this).offset(),w=$(this).width()+10;
p.left+=$(this).index()%2? -w:w;
$(".box_info").show().css(p).end();
},function(){
$(this).css({"border-color":"#DEDEDE"});
$(".box_info").hide();
});
});
jQuery(function($){
var boxs= $(".box_list .box");
$(".box_list .box").hover(function(){
$(this).css({"border-color":"#ff5b02"});
var p=$(this).offset(),w=$(this).width()+10; //这个10 可以根据你实现的偏差量进行调整
p.left+= boxs.index(this) %2? -w:w;
$(".box_info").show().css(p).end();
},function(){
$(this).css({"border-color":"#DEDEDE"});
$(".box_info").hide();
});
});