一些功能记录

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;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{
                 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的学习网站。

原文地址:https://www.cnblogs.com/zjingjing/p/8023983.html