您的位置：首页 > Web前端

前端插件日常问题整理

2016-09-01 17:12 531 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

前端插件日常问题 整理

前端插件日常问题整理