jQuery房屋墙面装饰模拟交互效果代码



168 668 223



特效描述:房屋墙面装饰 模拟交互效果,jQuery交互效果,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/tuodong.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

3. HTML代码

<button class="mouseoveropen">指向弹出</button>
<div class="view">
    <div class="viewbg"></div>
    <div class="room">
        <div class="close"></div>
        <h1>模拟效果</h1>
        <div class="left">
            <div class="list">
                <h2>风格名称</h2>
                <ul class="type">
                    <li data-type="1" class="active">卧室</li>
                    <li data-type="2">卫生间</li>
                    <li data-type="3">餐厅</li>
                    <li data-type="4">客厅</li>
                    <li data-type="5">办公室</li>
                    <li data-type="6">其他</li>
                    <li data-type="7">自定义</li>
                </ul>
            </div>
            <div class="pic">
                <h2>图片</h2>
                <ul class="on">
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                </ul>
                <ul>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                </ul>
                <ul>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                </ul>
                <ul>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                </ul>
                <ul>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                </ul>
                <ul>
                    <li><img src="img/artisoo_bedroom_2.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_5.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_6.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_1.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_4.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_8.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_3.jpg" /></li>
                    <li><img src="img/artisoo_bedroom_7.jpg" /></li>
                </ul>
                <ul>
                    <li class="addimg">
                        <form enctype="multipart/form-data" name="form1">
                            <a class="btn_addPic" href="javascript:void(0);"><span><em>+</em>添加图片</span><input id="f" class="filePrew" type="file" name="f" onchange="change()" title="支持jpg、jpeg、gif、png格式,文件小于5M" tabIndex="3" size="3"  /> </a>
                                <img id="preview" alt="" name="pic" />
                        </form>
                    </li>
                </ul>
                <div style="clear:both;"></div>
            </div>
            <div class="wallcolor">
                <h2>选择纯色</h2>
                <table class="boxbg">
                    <tbody>
                    <tr>
                        <td bgcolor="#000000"></td>
                        <td bgcolor="#2F0000"></td>
                        <td bgcolor="#600030"></td>
                        <td bgcolor="#460046"></td>
                        <td bgcolor="#28004D"></td>
                        <td bgcolor="#000079"></td>
                        <td bgcolor="#000079"></td>
                        <td bgcolor="#003E3E"></td>
                        <td bgcolor="#006030"></td>
                        <td bgcolor="#006000"></td>
                        <td bgcolor="#467500"></td>
                        <td bgcolor="#424200"></td>
                        <td bgcolor="#5B4B00"></td>
                        <td bgcolor="#844200"></td>
                        <td bgcolor="#642100"></td>
                        <td bgcolor="#613030"></td>
                        <td bgcolor="#616130"></td>
                        <td bgcolor="#336666"></td>
                        <td bgcolor="#484891"></td>
                        <td bgcolor="#6C3365"></td>
                    </tr>
                    <tr>
                        <td bgcolor="#4F4F4F"></td>
                        <td bgcolor="#750000"></td>
                        <td bgcolor="#BF0060"></td>
                        <td bgcolor="#930093"></td>
                        <td class="" bgcolor="#5B00AE"></td>
                        <td bgcolor="#0000C6"></td>
                        <td bgcolor="#005AB5"></td>
                        <td bgcolor="#009393"></td>
                        <td bgcolor="#01B468"></td>
                        <td bgcolor="#00A600"></td>
                        <td bgcolor="#73BF00"></td>
                        <td bgcolor="#8C8C00"></td>
                        <td bgcolor="#AE8F00"></td>
                        <td bgcolor="#D26900"></td>
                        <td bgcolor="#BB3D00"></td>
                        <td bgcolor="#804040"></td>
                        <td bgcolor="#808040"></td>
                        <td bgcolor="#408080"></td>
                        <td bgcolor="#5A5AAD"></td>
                        <td bgcolor="#8F4586"></td>
                    </tr>
                    <tr>
                        <td bgcolor="#7B7B7B"></td>
                        <td bgcolor="#CE0000"></td>
                        <td class="" bgcolor="#FF0080"></td>
                        <td bgcolor="#E800E8"></td>
                        <td bgcolor="#921AFF"></td>
                        <td bgcolor="#4A4AFF"></td>
                        <td bgcolor="#0080FF"></td>
                        <td bgcolor="#00E3E3"></td>
                        <td bgcolor="#02F78E"></td>
                        <td bgcolor="#00EC00"></td>
                        <td bgcolor="#9AFF02"></td>
                        <td class="" bgcolor="#E1E100"></td>
                        <td bgcolor="#EAC100"></td>
                        <td bgcolor="#FF9224"></td>
                        <td bgcolor="#FF5809"></td>
                        <td bgcolor="#984B4B"></td>
                        <td bgcolor="#949449"></td>
                        <td bgcolor="#4F9D9D"></td>
                        <td bgcolor="#7373B9"></td>
                        <td bgcolor="#9F4D95"></td>
                    </tr>
                    <tr>
                        <td bgcolor="#ADADAD"></td>
                        <td class="" bgcolor="#FF2D2D"></td>
                        <td bgcolor="#FF79BC"></td>
                        <td bgcolor="#FF77FF"></td>
                        <td bgcolor="#BE77FF"></td>
                        <td bgcolor="#9393FF"></td>
                        <td bgcolor="#66B3FF"></td>
                        <td bgcolor="#80FFFF"></td>
                        <td bgcolor="#7AFEC6"></td>
                        <td bgcolor="#79FF79"></td>
                        <td bgcolor="#C2FF68"></td>
                        <td bgcolor="#FFFF6F"></td>
                        <td bgcolor="#FFE153"></td>
                        <td bgcolor="#FFBB77"></td>
                        <td bgcolor="#FF9D6F"></td>
                        <td bgcolor="#C48888"></td>
                        <td bgcolor="#B9B973"></td>
                        <td bgcolor="#81C0C0"></td>
                        <td bgcolor="#A6A6D2"></td>
                        <td bgcolor="#C07AB8"></td>
                    </tr>
                    <tr>
                        <td bgcolor="#E0E0E0"></td>
                        <td bgcolor="#FF9797"></td>
                        <td bgcolor="#FFC1E0"></td>
                        <td bgcolor="#FFBFFF"></td>
                        <td bgcolor="#DCB5FF"></td>
                        <td bgcolor="#CECEFF"></td>
                        <td bgcolor="#ACD6FF"></td>
                        <td class="active" bgcolor="#CAFFFF"></td>
                        <td bgcolor="#C1FFE4"></td>
                        <td bgcolor="#BBFFBB"></td>
                        <td bgcolor="#DEFFAC"></td>
                        <td bgcolor="#FFFFB9"></td>
                        <td bgcolor="#FFF0AC"></td>
                        <td bgcolor="#FFDCB9"></td>
                        <td bgcolor="#FFCBB3"></td>
                        <td bgcolor="#E1C4C4"></td>
                        <td bgcolor="#D6D6AD"></td>
                        <td bgcolor="#B3D9D9"></td>
                        <td bgcolor="#D8D8EB"></td>
                        <td bgcolor="#DAB1D5"></td>
                    </tr>
                    <tr>
                        <td bgcolor="#FFFFFF"></td>
                        <td bgcolor="#FFECEC"></td>
                        <td bgcolor="#FFF7FB"></td>
                        <td bgcolor="#FFF7FF"></td>
                        <td bgcolor="#FAF4FF"></td>
                        <td bgcolor="#FBFBFF"></td>
                        <td bgcolor="#ECF5FF"></td>
                        <td bgcolor="#FDFFFF"></td>
                        <td bgcolor="#FBFFFD"></td>
                        <td bgcolor="#F0FFF0"></td>
                        <td bgcolor="#F5FFE8"></td>
                        <td bgcolor="#FFFFF4"></td>
                        <td class="" bgcolor="#FFFCEC"></td>
                        <td bgcolor="#FFFAF4"></td>
                        <td bgcolor="#FFF3EE"></td>
                        <td bgcolor="#F2E6E6"></td>
                        <td bgcolor="#E8E8D0"></td>
                        <td bgcolor="#D1E9E9"></td>
                        <td bgcolor="#F3F3FA"></td>
                        <td bgcolor="#EBD3E8"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="right">
            <!--拖动选择 begin-->
            <div class="llll">
                <div id="box">
                    <img src="img/flower002.jpg" />
                    <div id="coor"></div>
                </div>
            </div>
            <!--拖动选择 end-->
            <div class="tip">
                <div>
                    <div style="float:left;width:350px;">
                        <span class="ArtisooC1">总价格: </span><span class="atprice"><em>144.28</em>&nbsp;€</span><span id="span1" style="margin-left:10px; cursor:pointer;">30*30</span><span id="span2" style="margin-left:10px; cursor:pointer;">50*50</span><span id="span3" style="margin-left:10px; cursor:pointer;">100*100</span><div class="clearBoth"></div>
                    </div>
                    <div>
                        <input src="img/button_in_cart.png" alt="Ajouter au panier" title=" Ajouter=Ajouter au=au panier=panier =" type="image" />
                    </div>
                </div>
                <div class="framesizeinfo"></div>
            </div>
        </div>
        <!--frame choose-->
    </div>
<script language="javascript">
function imgdragstart(){return false;}
for(i in document.images)document.images[i].ondragstart=imgdragstart;
</script>
<script>
$(document).ready(function(){
    $("#span1").click(function(){
		$("#box").css({"width":"30px","height":"30px"});
		});
    $("#span2").click(function(){
		$("#box").css({"width":"50px","height":"50px"});
		})
	$("#span3").click(function(){
		$("#box").css({"width":"100px","height":"100px"});
		})
});
</script> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 导航切换 右键菜单 图片头像上传 图片广告 文字提示框 文件上传 对联广告 图片切换 提示框/弹出层 文本框 文字切换 layer 下拉框 叠加浮动层 背景切换 lightbox 复选 手风琴 单选 Tooltip工具提示框 选项卡自动切换 登录框 浮动提示框 视频切换 注册框 html5弹窗动画 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动切换 滑动选项卡切换 悬浮浮动漂浮 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 浮动提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到