一些功能記錄
阿新 • • 發佈：2017-12-11
leave ops body nload pre dex .ajax index 新浪微博
1、 分享到網頁的接口
<div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微博"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div> <script> window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src=‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘+~(-new Date()/36e5)]; </script>
這樣的話，可以直接出效果在頁面上，實現頁面的分享功能。
2、 頁面中的滾動效果（從下往上的字母效果）
function doRoll(ele) { var _wrap = $(ele); //定義滾動區域 var _interval = 2000; //定義滾動間隙時間 var _moving; //需要清除的動畫 _wrap.hover(function() { clearInterval(_moving); //當鼠標在滾動區域中時,停止滾動 }, function() { _moving = setInterval(function() { var _field = _wrap.find(‘.cotem_lj:first‘); //此變量不可放置於函數起始處,li:first取值是變化的 var _h = _field.height(); //取得每次滾動高度 _field.animate({ marginTop: -_h + ‘px‘ }, 600, function() { //通過取負margin值,隱藏第一行 _field.css(‘marginTop‘, 0).appendTo(_wrap); //隱藏後,將該行的margin值置零,並插入到最後,實現無縫滾動 }) }, _interval) //滾動間隔時間取決於_interval }).trigger(‘mouseleave‘); //函數載入時,模擬執行mouseleave,即自動滾動 } //調用函數doRoll doRoll(“.item_li”);
3、 頁面中從右往左滾動效果
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top> <img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg"> </td> <td id=demo2 valign=top></td> </tr> </table> </div> <script> var speed=30 //註意兩個元素處於一行同一水平線 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
4、 獲取所在城市
var city1; $.ajax({ //獲取客戶端 IP 和 歸屬地 url: "http://int.dpool.sina.com.cn/iplookup/iplookup.php? format=js", dataType: "json", success: function (data) { console.log(data) console.log(‘歸屬地:‘ + data.Isp) var str=data.Isp; var lcity = str.substring(0,str.indexOf("市")+1); $(".city").html(data.city); console.log(city1) });
5、 在頁面中滿屏幕移動
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="" content="">
</head>
<body>
<style>
#demoerweima{
position: absolute;
padding: 16px;
border: 1px solid #e5e5e7;
background-color: #fff;
}
#demoerweima img{
width: 102px;
height: 102px;
}
#demoerweima p {
font-size: 14px;
line-height: 20px;
}
</style>
<div id="demoerweima">
<img src="resource/images/erweima.png" style="">
<p>微信掃一掃<br>關註該公眾號</p>
</div>
<script type="text/javascript">
window.onload=function(){
//寫入
document.body.appendChild(demoerweima);
//定時器
var a1a = setInterval(moves,100);
//函數
var x = 10;
var y = 10;
function moves(){
var tops = demoerweima.offsetTop
var lefts = demoerweima.offsetLeft
if (lefts>=document.documentElement.clientWidth-demoerweima.offsetWidth || lefts<=0)
{
x=-x
}
if (tops>=document.documentElement.clientHeight-demoerweima.offsetHeight || tops<=0)
{
y=-y
}
tops+=y;
lefts+=x;
demoerweima.style.top=tops+"px"
demoerweima.style.left=lefts+"px"
}
//懸停停止
demoerweima.onmouseover=function(){
clearInterval(a1a);
}
//放手繼續運動
demoerweima.onmouseout=function(){
a1a =setInterval(moves,100);
}
}
</script>
</body>
</html>
6、 帝國cms實現全站搜索功能
<form action="/e/search/index.php" method="post" name="searchform" id="searchform"> <input name="keyboard" type="text" id="keyboard" class="inputText" placeholder=""> <input type="hidden" name="show" value="title"> <input type="hidden" name="tempid" value="2"> <input type="hidden" name="tbname" value="news"> <input type="image" class="fangdajing inputSub" src="/resource-blue/images/search.png"> </form>
通過以上多個input實現全文搜索，其功能可以參考帝國cms的學習網站。
一些功能記錄