前端插件日常问题整理

最新推荐文章于 2024-06-08 15:30:47 发布

Vanderm

最新推荐文章于 2024-06-08 15:30:47 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/Vanderm/article/details/52401707

版权

1）luara图片轮播

<script type="text/javascript" src="/js/jquery.luara.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>

                <div style="height:380px;" class="luara">
                    <ul style="height:100%;" class="pa">
                        <li>
                            <img src="" alt="" />
                        </li>
                        <li>
                            <img src="/" alt="" />
                        </li>
                        <li>
                            <img src="" alt="" />
                        </li>
                    </ul>
                    <ol class="pa">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>

<ol>定义切换点击的样式

js中定义切换方式

 $(".luara").luara({ width: "666", height: "440", interval: 8000, selected: "seleted", deriction: "left" });

2）Echarts饼状图、柱状图选中事件

 myChartPie.on('mouseover', function (params) {
        if (params.name === '个人原因') {
            $('.wsbj-color').css('color', '#FF7A7B');
            $('#wsbj-color2').css('backgroundImage', 'url(../../Images/wsbj-3.png)');
            $('#chart_label').html(params.name);
            $('#chart_value').html(params.data.value);
            $('#chart_value').css('color', '#FF7A7B');
        } else
            if (params.name === '最少') {
                $('.wsbj-color').css('color', '#F7AD66');
                $('#wsbj-color2').css('backgroundImage', 'url(../../Images/wsbj-1.png)')
                $('#chart_label').html(params.name);
                $('#chart_value').html(params.data.value);
                $('#chart_value').css('color', '#F7AD66');
            }
    }

3）多个echarts图表自适应

myChartchaxun1.setOption(option);

在输出语句后加下面代码，名称不一样，避免错误。

window.addEventListener("resize", function () {
                    myChartchaxun1.resize();

});

在ie8下会出现报错，需要引入jquery来解决

$(window).resize(function(){<span style="font-family: Arial, Helvetica, sans-serif;">             </span>

<pre name="code" class="javascript">myChartchaxun1.resize();

});

4）简单的tab页切换

<body>
<style>
body{ padding-top:100px;}
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; top:0; margin-left:-480px; overflow:hidden;}
</style>



<div class="baidu_ads">
<script type="text/javascript">
var sogou_ad_id=395091;
var sogou_ad_height=90;
var sogou_ad_width=960;
</script>
<script type="text/javascript" src="http://images.sohu.com/cs/jsfile/js/c.js"></script>
</div>




<span style="display:none;">
<script src="http://s94.cnzz.com/stat.php?id=4106941&web_id=4106941" language="JavaScript"></script><script src="http://c.cnzz.com/core.php?web_id=4106941&t=z" charset="utf-8" type="text/javascript"></script>
</span><div id="_uuid_im_3029_" style="display: none;"></div><!-- html代码begin -->
<div id="outer">
    <ul id="tab">
        <li class="current">tab标签</li>
        <li>qq在线客服代码</li>
        <li>css3</li>
    </ul>
    <div id="content">
        <ul style="display:block;">
           <a href="http://www.lanrenzhijia.com/tab">tab标签</a>
        </ul>
        <ul>
            <a href="http://www.lanrenzhijia.com/service">qq在线客服代码</a>
        </ul>
        <ul>
           <a href="http://www.lanrenzhijia.com/js/css3">css3</a>
        </ul>
    </div>
</div>
<!-- html代码end -->

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
	$(function(){
		window.onload = function()
		{
			var $li = $('#tab li');
			var $ul = $('#content ul');
						
			$li.mouseover(function(){
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass();
				$this.addClass('current');
				$ul.css('display','none');
				$ul.eq($t).css('display','block');
			})
		}
	});
</script>


<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png");"></div><div id="tip-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png") repeat-x;"></div><div id="tip-right-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png");"></div><div id="tip-right" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png") repeat-y;"></div><div id="tip-right-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png");"></div><div id="tip-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png") repeat-x;"></div><div id="tip-left-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png");"></div><div id="tip-left" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png");"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png");"></div><div id="tip-arrow-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png");"></div></div></body>