那些小事（一）---网页分享的实现和特效

最近有许多节日，电子商务网站的各种活动层出不穷，最近参加一个淘网址--让熊猫飞一会，感觉与自己曾经做过的活动有许多类似的地方。所以将这些贴出来，做个总结，小白工作仅半年，欢迎指教。

这一季是关于网页分享的实现

基本实现方式

使用<a href=””></a>的方式将分享信息包含在href中。

分享信息 = 网站链接 + “？”+ 分享内容（+ 特定ID）。

网站链接不同网站是不同的，如：

新浪微博：http://v.t.sina.com.cn/share/share.php

人人网：http://share.renren.com/share/buttonshare.do

分享内容

分享内容一般由title、url和content、图片4部分组成，依据不同公司的要求又有变化。根据不同网站链接编码方式又有不同。

往往需要将汉字和特殊字符进行转码。

var url=encodeURIComponent(location.href);//处理url中的特殊字符
var product=document.getElementById("productFeature").value; //产品特色
productFeature = productFeature.replace(/<[^>].*?>/g,"");//去除html标签
productFeature = productFeature.replace(/\r\n/g,"")//去除换行符
var title = encodeURIComponent(productFeature);//对汉字进行编码，若直接从网页中抓取则还需要使用正则去除html标记等
varpName=encodeURIComponent(document.getElementById("productName").value) //产品名称
varpic=encodeURIComponent("http://www.sinosig.com"+document.getElementById("productImage").value);  //产品图片

经过这样处理后基本就可以满足大部分网站了，但是新浪微博需要将汉字转换为gb2312编码格式的.

http://v.t.sina.com.cn/share/share.php?appkey=1407362055&url="+url+"&title=<%=java.net.URLEncoder.encode((String)pageContext.findAttribute("productFeature"),"gb2312")%>&pic="+pic;

而搜狐微博则可以直接使用汉字：

http://t.sohu.com/third/post.jsp?url=http%3A%2F%2Fgeili.tao123.com&title=快来玩！淘宝网的tao123送汽车了！玩转盘可以抽奖得ipad！邀请好友最多的用户还能得到熊猫汽车一辆！"

也许是因为搜狐微博是用jsp页面接受信息的原因。

最终完整的分享链接则像：

http://v.t.sina.com.cn/share/share.php?title=%E5%BF%AB%E6%9D%A5%E7%8E%A9%EF%BC%81%E6%B7%98%E5%AE%9D%E7%BD%91%E7%9A%84%23tao123%E9%80%81%E6%B1%BD%E8%BD%A6%23%E4%BA%86%EF%BC%81%E7%8E%A9%E8%BD%AC%E7%9B%98%E5%8F%AF%E4%BB%A5%E6%8A%BD%E5%A5%96%E5%BE%97ipad%EF%BC%81%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B%E6%9C%80%E5%A4%9A%E7%9A%84%E7%94%A8%E6%88%B7%E8%BF%98%E8%83%BD%E5%BE%97%E5%88%B0%E7%86%8A%E7%8C%AB%E6%B1%BD%E8%BD%A6%E4%B8%80%E8%BE%86%EF%BC%81&url=http%3A%2F%2Fgeili.tao123.com

有些网站只要求title即可，比如新浪微博，它只有一个信息文本框，便将title中的信息放入。而百度收藏既有标题又有描述，故若只有title没有content，描述便不显示任何信息。

http://t.163.com/article/user/checkLogin.do?info=%E5%BF%AB%E6%9D%A5%E7%8E%A9%EF%BC%81%E6%B7%98%E5%AE%9D%E7%BD%91%E7%9A%84%23tao123%E9%80%81%E6%B1%BD%E8%BD%A6%23%E4%BA%86%EF%BC%81%E7%8E%A9%E8%BD%AC%E7%9B%98%E5%8F%AF%E4%BB%A5%E6%8A%BD%E5%A5%96%E5%BE%97ipad%EF%BC%81%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B%E6%9C%80%E5%A4%9A%E7%9A%84%E7%94%A8%E6%88%B7%E8%BF%98%E8%83%BD%E5%BE%97%E5%88%B0%E7%86%8A%E7%8C%AB%E6%B1%BD%E8%BD%A6%E4%B8%80%E8%BE%86%EF%BC%81+http%3A%2F%2Fgeili.tao123.com"

这是网易微博的分享链接，它只有一个参数info，其他信息则使用+号连接。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

页面特效实现

由于可以提供分享应用的网站众多，所以可能直接显示的分享网站并不全，这样就要求必须隐藏一部分分享网站，使用一些不同触发条件使分享网站全部展示。

目前在春晚和淘宝熊猫活动使用的方式不同，但均使用jquery的动画效果实现。

代码如下：

熊猫项目中实现方式较为简单

HTML代码：

目前在春晚和淘宝熊猫活动使用的方式不同，但均使用jquery的动画效果实现。

代码如下：

熊猫项目中实现方式较为简单

HTML代码：

<div class="share_title">......//显示的若干个分享链接<span class="icon"></span></div>
<ul class="share_cnt cf">
<li></li><li></li><li></li><li></li>//其余的分享链接，并且这一部分是默认隐藏的
</ul>

JS代码

//页顶分享弹出
            var time = 0;
            $(".share_title span,.share_cnt").mouseover(function(){
                $(".share_cnt").show();//其余的分享链接显示
                clearTimeout(time);
            }).mouseout(function(){
                time = setTimeout(function(){
                    $(".share_cnt").hide();//其余的分享链接隐藏
                },300);
            });

春晚项目的效果是滑动效果，显得较为复杂：

HTML代码

<divid="shareBarWrap"style="width:666px;position:absolute; overflow:hidden; padding:0px; margin:0px; display:none;">//静态容器
<divid="shareBar"style="width:666px; height:33px; position:relative; left:666px; top:0px; background-color:white; padding:0px; marign:0px; border:none;">//动态容器包裹，由于分享图片是由右向左滑动，所以注意着重的2个参数
<imgsrc="share_background.jpg"border="0"usemap="#ShareMap"width="666px" height="33" />
<map name="ShareMap" id="ShareMap">
<areashape="rect"coords="120,0,190,35"id="kaixin"onfocus="this.blur();"/>
</map>
</div>
</div>
//onFocus="this.blur();"这一句可以消除点击之后的焦点虚线框，但他对FF等支持并不好，改变border的值为0效果最好

<img src="woyaoshangchunwan.jpg" border="0" usemap="#Map" alt="春晚"/>
<map name="Map" id="Map">
<area id="addFavoriteBtn" shape="rect" coords="705,10,785,30" href="#" onFocus="this.blur();"/>
<area id="shareRect" shape="rect" coords="810,10,890,30" href="#" onFocus="this.blur();"/>
</map>
</div>
//分享图片隐藏在一个动态容器shareBar中，动态容器又包含在静态的shareBarWrap中，shareBarWrap容器是由“分享此页面”触发显示的。
而这个触发点是一整张图片的一部分
所以这里大量使用了map标签

HTML <map> 标签

定义和用法

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

提示和注释：

注释：area 元素永远被嵌套在 map 元素内部。area 元素可定义图像映射中的区域，这块区域可以当作导航用。

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

shape="rect" 指定义了一个正方形coords="810,10,890,30" 分别为左上角和右下角坐标

shape="circ" 定义了一个圆形 coords="50,50,25" 圆点坐标50，50

JS代码

$(document).ready(function(){
var opt = {
        moveDirection:"left",
        startPos:{left:140, top:0},
        animateType:"slide",
        triggerObjId:"shareRect",//页面加载时便与”分享此页面”关联
        delay:1000,
        title:"春晚"
    };
settingShareBar(opt);//调用滑动效果的方法
}

这一部分的opt是这次活动的最终滑动方案，即向左滑动，时间为1秒

settingShareBar是滑动方案实现的通用代码，可以选择left、right、up、down4中滑动方案，触发id、title默认为空需要传递。

function settingShareBar(opt)
{
    var option = jQuery.extend({
        moveDirection:"left",//right,up,down
        startPos:{left:0, top:0},
        animateType:"slide",
        triggerObjId:null,
        delay:2000,
        title:null
    },opt||{});//使用extend使需要的效果覆盖默认的参数
    if (option.triggerObjId == null)
    {
        alert("没有事件触发对象");
        return;
    }
    if (option.title) titleFromParam = option.title;
    
    var $shareBarWrap = $("#shareBarWrap");//得到静态容器
    var $shareBar = $("#shareBar");//得到动态容器
    var shareBarStartLeft = 0;
    var shareBarEndLeft = 0;
    var shareBarStartTop = 0;
    var shareBarEndTop = 0;
    var shareBarWidth = 666;//与容器的宽度一致
    var shareBarHeight = 66;//是容器高度的2倍
    
    if (option.animateType == "slide")
    {
        $shareBarWrap.css("left",option.startPos.left+"px");
        $shareBarWrap.css("top",option.startPos.top+"px");
        //确定静态容器在页面中的位置
        if (option.moveDirection == "left")
        {
            shareBarStartLeft = shareBarWidth;
            $shareBar.css("left",shareBarStartLeft+"px");
        }//若是向左滑动，则将分享条的开头在容器的最右端
        else if (option.moveDirection == "right")
        {
            shareBarStartLeft = 0-shareBarWidth;
            $shareBar.css("left",shareBarStartLeft+"px");
        }//若是向右滑动，则将分享条的末尾在容器的最左端，此时坐标是负值
        else if (option.moveDirection == "up")
        {
            shareBarStartTop = shareBarHeight;
            $shareBar.css("top",shareBarStartTop+"px");
        }//同理
        else if (option.moveDirection == "down")
        {
            shareBarStartTop = 0-shareBarHeight;
            $shareBar.css("top",shareBarStartTop+"px");
        }//同理
    }
//给 ‘分享此页面’ 绑定事件
    $("#"+option.triggerObjId).bind("mouseover",function(event){
        $shareBar.stop();
if (option.moveDirection== "left" || option.moveDirection == "right")
        {
            $shareBarWrap.css("display","");
            $shareBar.animate({left:shareBarEndLeft},option.delay);
        }//从left:666滑动到left:0，或是从left:-666滑动到left:0
else if (option.moveDirection == "up" || option.moveDirection == "down")
        {
            $shareBarWrap.css("display","");
            $shareBar.animate({top:shareBarEndTop},option.delay);
        }
    });

    $("#"+option.triggerObjId).bind("mouseout",function(){
        $shareBar.stop();
if(option.moveDirection == "left" || option.moveDirection == "right")
        {
    $shareBar.animate({left:shareBarStartLeft},option.delay,null,function(){$shareBarWrap.css("display","none");});
        }//回到开始的位置，callback方法设置静态容器为不可见
else if (option.moveDirection == "up" || option.moveDirection == "down")
        {
    $shareBar.animate({top:shareBarStartTop},option.delay,null,function(){$shareBarWrap.css("display","none");});
        }
    });
//分享条绑定事件
    $shareBar.bind("mouseover",function(){
        $shareBar.stop();//停止动画
if(option.moveDirection == "left" || option.moveDirection == "right")
        {
            $shareBarWrap.css("display","");
            $shareBar.animate({left:shareBarEndLeft},option.delay);
        }//在分享条中编写动画是为了在鼠标移开分享按钮后，分享条回滚到初始位置
else if (option.moveDirection == "up" || option.moveDirection == "down")
        {
            $shareBarWrap.css("display","");
            $shareBar.animate({top:shareBarEndTop},option.delay);
        }
    });

    $shareBar.bind("mouseout",function(){
        $shareBar.stop();
if (option.moveDirection == "left" || option.moveDirection == "right")
        {        $shareBar.animate({left:shareBarStartLeft},option.delay,null,function(){$shareBarWrap.css("display","none");});
        }//同样在分享条的鼠标移出事件的实现与分享按钮一样
else if (option.moveDirection == "up" || option.moveDirection == "down")
        {            $shareBar.animate({top:shareBarStartTop},option.delay,null,function(){$shareBarWrap.css("display","none");});
        }
    });

分享实现之番外篇

在实现分享的同时，可能会有复制网站链接和加入网站收藏等功能

复制网站链接到剪切板

function copy1(){
   var obj = document.getElementById('id'); 
   var clipBoardContent = "";
   clipBoardContent += obj.innerText; 
   obj.select();
   window.clipboardData.setData("Text", clipBoardContent);
   alert("复制成功!");
}

function copy2(){
   var obj = document.getElementById('id'); 
   obj.select();
   js = obj.createTextRange();
   js.execCommand("Copy");
   alert("复制成功!");
}

上面两种方式都可以实现将文本框中的信息复制到剪切板的功能

加入收藏

window.external.addFavorite(sURL, sTitle);   

Surl = window.location
sTitle = document.title

posted on 2011-03-07 09:35 waitingfortime 阅读(790) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

waitingfortime

导航

公告

那些小事（一）---网页分享的实现和特效