jQuery 3D室内全景图_HTML室内装修Demo
2016-11-21 13:11:46  By: dwtedx

分享一款jQuery室内墙面装饰交互效果、之前也有朋友说要做一款室内装修的效果程序、今天就给大家分享一个Demo代码、Demo是一款兼容ie8浏览器的室内设计特效代码、基本上是支持所有浏览器、虽然不是动态的可拖拽的效果、但是这个效果在一般情况下也是可以满足在部分需求的、效果图如下

jquery 3d室内全景图


部分HTML代码

<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>
            <div style="clear:both;"></div>
        </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>


部分JS代码

<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> 


jQuery html室内装修源代码下载链接: jQuery室内装修Demo 密码: jyv7

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+